Beispiel
Geben Sie ein Bild als Rahmen um ein Element:
#borderimg {
-webkit-border-image: url(border.png) 30
round; /* Safari 3.1-5 */
-o-border-image: url(border.png)
30 round; /* Opera 11-12.1 */
border-image: url(border.png)
30 round;
}
Versuch es selber " Mehr "Try it Yourself" Sie "Try it Yourself" Beispiele unten.
Definition und Verwendung
Die border-image-Eigenschaft können Sie ein Bild angeben, die anstelle der normalen Rahmen um ein Element verwendet werden.
Die border-image - Eigenschaft ist eine zusammenfassende Eigenschaft für die Einstellung der Grenzbildquelle , border-image-Scheibe , border-image-Breite , border-image-Anfang und border-image-Wiederholungseigenschaften.
Ausgelassene Werte werden auf ihre Standardwerte gesetzt.
| Standardwert: | none 100% 1 0 stretch |
|---|---|
| Vererbt: | no |
| Anima: | no. Read about animatable |
| Version: | CSS3 |
| JavaScript-Syntax: | object .style.borderImage="url(border.png) 30 round" Try it |
Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die die Eigenschaft vollständig unterstützt.
Zahlen, gefolgt von -webkit-, -moz- oder -o- die erste Version an, die mit einem Präfix gearbeitet.
| Eigentum | |||||
|---|---|---|---|---|---|
| border-image | 16.0 4.0 -webkit- | 11.0 | 15,0 3.5 -moz- | 6.0 3.1 -webkit- | 15,0 11,0 -o- |
Hinweis: Siehe die einzelnen Browser - Unterstützung für jeden unter Wert.
CSS-Syntax
border-image:source slice width outset repeat|initial|inherit;Eigenschaftswerte
| Wert | Beschreibung | Spiel es |
|---|---|---|
| border-image-source | Der Pfad zum Bild als Grenze verwendet werden | |
| border-image-slice | Wie das Randbild zu schneiden | Spiel es " |
| border-image-width | Die Breite des Randbild | |
| border-image-outset | Der Betrag, um den die Grenze Bildbereich jenseits der Grenze Feld erstreckt | |
| border-image-repeat | Ob die Grenze Bild wiederholt werden soll, abgerundet oder gestreckt | Spiel es " |
| 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 |
Mehr Beispiele
Beispiel
Verschiedene Scheibe Werte völlig verändert das Aussehen der Grenze:
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png)
50 round; /* Safari 3.1-5 */
-o-border-image: url(border.png)
50 round; /* Opera 11-12.1 */
border-image: url(border.png)
50 round;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png) 20% round; /* Safari 3.1-5 */
-o-border-image: url(border.png) 20% round; /* Opera 11-12.1 */
border-image: url(border.png) 20% round;
}
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png)
30% round; /* Safari 3.1-5 */
-o-border-image: url(border.png)
30% round; /* Opera 11-12.1 */
border-image: url(border.png)
30% round;
} Versuch es selber " Verwandte Seiten
CSS3 Tutorial: CSS3 Border Images
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-source property - border-image-source property
CSS Referenz: border-image-width property
HTML - DOM - Referenz: borderImage property