Mehr Kontrolle über CSS-Grenzen mit Hintergrundbild

Standard -CSS -Grenzen bieten eine begrenzte Anpassung für gestrichelte oder gepunktete Stile. Zum Beispiel:

 .Kasten {
   Grenze: 1PX gestrichelt schwarz;
   Grenze: 3px gepunktet rot;
}

In diesem Ansatz fehlt die Kontrolle über Armaturenbrett-/Spaltlängen, Winkel, Verblassen oder Animation. Clevere Techniken können diese Einschränkungen jedoch überwinden.

Amit Sheens gestrichelten Grenzgenerator zeigt eine leistungsstarke Methode: Verwenden von vier mehreren Hintergründen. Die background akzeptiert von Kommas getrennte Werte. Durch die Definition von vier Hintergründen (oben, rechts, unten, links) wird jeweils eine umfangreiche Kontrolle erreicht.

Beispiel:

 .Kasten {
  background-image: repeating-linear-gradient(0deg, #333333, #333333 10px, transparent 10px, transparent 20px, #333333 20px), repeating-linear-gradient(90deg, #333333, #333333 10px, transparent 10px, transparent 20px, #333333 20px), repeating-linear-gradient(180deg, #333333, #333333 10px, transparent 10px, transparent 20px, #333333 20px), repeating-linear-gradient(270deg, #333333, #333333 10px, transparent 10px, transparent 20px, #333333 20px);
  Hintergrundgröße: 3px 100%, 100% 3px, 3px 100%, 100% 3px;
  Hintergrundposition: 0 0, 0 0, 100% 0, 0 100%;
  Hintergrundrepeat: No-Repeat;
}

Diese Entsperren erweiterte Styling -Optionen, die bisher nicht mit einfachen Grenzen nicht verfügbar sind.

Das obige ist der detaillierte Inhalt vonMehr Kontrolle über CSS-Grenzen mit Hintergrundbild. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!