CSS/Eigenschaften/border-image
Aus SELFHTML-Wiki
< CSS | Eigenschaften
Die Eigenschaft border-image zeichnet ein Bild um ein bestimmtes Element. Sie ersetzt die normale border des Elements.
Früher für Schmuckrahmen und abgerundete Ecken verwendet, lassen sich heute mit im CSS erzeugen Verläufen interessante Effekte erzielen.
- Erlaubte Werte
- durch Leerzeichen getrennte Angaben zu
- Vererbung steuernde Werte
inherit
,initial
,unset
undrevert
- Standardwert
siehe Einzeleigenschaften
- anwendbar auf
alle Elemente
- Vererbung
nein
- animierbar
ja
Beispiel
div {
border-style: solid;
border-width: 1em;
/* source | slice */
border-image: linear-gradient(to top right, transparent, steelBlue) 1;
}
.schmuckrahmen {
/* source | slice | width | outset | repeat */
border-image: url(Border-image.png) 90 60 stretch 1em;
}
Beachten Sie: Es sollte eine border definiert werden, falls das Bild nicht geladen wird.
Empfehlung: Um den Elementen
thead
, tbody
, tfoot
oder tr
einen sichtbaren Rahmen zuzuweisen, müssen die Rahmen innerhalb der Tabelle zusammenfallen (d. h. table { border-collapse: collapse; }
)Siehe auch
Weblinks
- Spezifikation (W3C): Border Images
- MDN: Border-image generator
Liste der CSS-Eigenschaften
schmuckrahmen
wird