Beispiel
Geben Sie ein Bild als Rahmen um ein Element:
#borderimg
{
border-image-source: url(border.png);
}
Versuch es selber " Definition und Verwendung
Der Rand-Bildquelle Eigenschaft gibt zu dem Bild der Pfad als Grenze verwendet werden (instead of the normal border around an element) .
Tip: Wenn der Wert "none" , oder wenn das Bild nicht angezeigt werden kann, werden die Rahmenarten verwendet werden.
Tipp: Schauen Sie auch an der Grenzbildeigenschaft (a shorthand property for setting all the border-image-* properties) von (a shorthand property for setting all the border-image-* properties) .
| Standardwert: | none |
|---|---|
| Vererbt: | no |
| Anima: | no. Read about animatable |
| Version: | CSS3 |
| JavaScript-Syntax: | object .style.borderImageSource="url(border.png)" Try it |
Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die die Eigenschaft vollständig unterstützt.
| Eigentum | |||||
|---|---|---|---|---|---|
| border-image-source | 15,0 | 11.0 | 15,0 | 6.0 | 15,0 |
CSS-Syntax
border-image-source: none|image|initial|inherit;Eigenschaftswerte
| Wert | Beschreibung |
|---|---|
| none | Kein Bild wird verwendet, |
| image | Der Pfad zum Bild als Grenze verwendet werden |
| initial | Setzt diese Eigenschaft auf den Standardwert. Lesen Sie mehr über Anfangs |
| inherit | Erbt diese Eigenschaft von seinem übergeordneten Element. Lesen Sie mehr über erben |
Verwandte Seiten
CSS3 Tutorial: CSS3 Border Images
CSS Referenz: border-image property - border-image property
CSS Referenz: border-image-outset property
CSS Referenz: border-image-repeat property
CSS Referenz: border-image-slice property - border-image-slice property
CSS Referenz: border-image-width property
HTML - DOM - Referenz: borderImageSource property