Übersicht
Die border-image
CSS Eigenschaft ermöglicht das Zeichnen eines Bildes an den Rändern eines Elements. Dies vereinfacht das Zeichnen von komplex wirkenden Widgets deutlich und macht den Gebrauch von neun Kästen um das Element für einige Fälle überflüssig.
border-image
wird anstatt der Randstile benutzt, die durch die border-style
Eigenschaft definiert werden. Es ist wichtig anzumerken, dass, wenn der berechnete Wert von border-image-source
, welcher entweder durch border-image-source
oder die Kurzschreibweise border-image
gesetzt werden kann, none
ist, oder falls das Bild nicht angezeigt werden kann, die Randstile verwendet werden.
Initialwert | wie die jeweiligen Kurzschreibweisen:
|
---|---|
Anwendbar auf | Alle Elemente, außer interne Tabellenelemente, falls border-collapse collapse ist. Auch anwendbar auf ::first-letter . |
Vererbt | Nein |
Prozentwerte | wie die jeweiligen Kurzschreibweisen:
|
Berechneter Wert | wie die jeweiligen Kurzschreibweisen:
|
Animationstyp | diskret |
Syntax
<'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>
Werte
Siehe die entsprechenden Eigenschaften der verschiedenen Werte.
Beispiele
Bild wiederholt (repeat)
Das Bild wird aufgeteilt und einfach gekachelt, um den Randbereich zu füllen.
.beispiel {
border: 30px solid transparent;
-moz-border-image:url("/files/4127/border.png") 30 30 repeat; /* Old firefox */
-webkit-border-image:url("/files/4127/border.png") 30 30 repeat; /* Safari */
-o-border-image:url("/files/4127/border.png") 30 30 repeat; /* Opera */
border-image:url("/files/4127/border.png") 30 30 repeat;
}
Ergibt:
Bild wiederholt (round)
Die Option round
ist eine Variante der repeat
Option, die die Kacheln so verteilt, dass die Enden sauber verbunden sind.
.beispiel {
border: 30px solid transparent;
-moz-border-image:url("/files/4127/border.png") 30 30 round; /* Old firefox */
-webkit-border-image:url("/files/4127/border.png") 30 30 round; /* Safari */
-o-border-image:url("/files/4127/border.png") 30 30 round; /* Opera */
border-image:url("/files/4127/border.png") 30 30 round;
}
Ergibt:
Bild gestreckt
Die stretch
Option streckt die Bilder, um den Randbereich zu füllen.
.beispiel {
border: 30px solid transparent;
-moz-border-image:url("/files/4127/border.png") 30 30 stretch; /* Old firefox */
-webkit-border-image:url("/files/4127/border.png") 30 30 stretch; /* Safari */
-o-border-image:url("/files/4127/border.png") 30 30 stretch; /* Opera */
border-image:url("/files/4127/border.png") 30 30 stretch;
}
Ergibt:
Spezifikation
Spezifikation | Status | Kommentar |
---|---|---|
CSS Backgrounds and Borders Module Level 3 Die Definition von 'border-image' in dieser Spezifikation. |
Anwärter Empfehlung |
Browser Kompatibilität
BCD tables only load in the browser