CSS - Eigenschaft border-image
Beispiel
Geben Sie ein Bild als Rahmen um ein Element an:
#borderimg {
border-image: url(border.png) 30 round;
}
Weitere „Probieren Sie es selbst“-Beispiele weiter unten.
Definition und Verwendung
Mit der border-image
Eigenschaft können Sie ein Bild angeben, das als Rahmen um ein Element verwendet werden soll.
Die Eigenschaft border-image ist eine abgekürzte Eigenschaft für:
Ausgelassene Werte werden auf ihre Standardwerte gesetzt.
Standardwert: | keine 100 % 1 0 Dehnung |
---|---|
Vererbt: | Nein |
Animierbar: | Nein. Lesen Sie mehr über animierbare |
Ausführung: | CSS3 |
JavaScript-Syntax: | object .style.borderImage="url(border.png) 30 rund" |
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt.
Zahlen gefolgt von -webkit-, -moz- oder -o- geben die erste Version an, die mit einem Präfix funktioniert hat.
Property | |||||
---|---|---|---|---|---|
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 individuelle Browserunterstützung für jeden Wert unten.
CSS-Syntax
border-image: source slice width outset repeat|initial|inherit;
Eigenschaftswerte
Value | Description | Play it |
---|---|---|
border-image-source | The path to the image to be used as a border | |
border-image-slice | How to slice the border image | |
border-image-width | The width of the border image | |
border-image-outset | The amount by which the border image area extends beyond the border box | |
border-image-repeat | Whether the border image should be repeated, rounded or stretched | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Mehr Beispiele
Beispiel
Unterschiedliche Slice-Werte verändern das Aussehen des Rahmens vollständig:
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 50 round;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 20% round;
}
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30% round;
}
Verwandte Seiten
CSS-Tutorial: CSS-Randbilder
CSS-Referenz: Eigenschaft border-image-outset
CSS-Referenz: Eigenschaft border-image-repeat
CSS-Referenz: Eigenschaft border-image-slice
CSS-Referenz: Eigenschaft border-image-source
CSS-Referenz: Eigenschaft border-image-width
HTML-DOM-Referenz: Eigenschaft borderImage