CSS/Eigenschaften/border-image

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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
Vererbung steuernde Werte inherit, initial, unset und revert
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;
}
  • Im obenen Beispiel erzeugt der Browser einen mit linear-gradient() definierten Verlauf
  • Für Elemente mit der Klasse schmuckrahmen wird
    • ein png geladen und
    • für die Ecken jeweils bei 90 Pixeln ab der Ober- und Unterkante, und bei 60 Pixeln ab der rechten und linken Kante abgeschnitten
    • An den Seitenkanten wird das Bild nicht wiederholt, sondern gestreckt.
    • Die Breite beträgt 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