Beispiel
Gibt an, wie das Randbild zu schneiden:
#borderimg {
border-image-slice: 30;
}
Versuch es selber " Definition und Verwendung
Die border-Bild-Slice - Eigenschaft gibt an, wie das Bild durch Angabe zu schneiden border-image-Quelle . Das Bild wird immer in neun Abschnitte geschnitten: vier Ecken, vier Kanten und der Mitte.
Die "middle" Teil wird als vollständig transparent behandelt werden , es sei denn , die Füllung Schlüsselwort festgelegt ist.
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: | 100% |
|---|---|
| Vererbt: | no |
| Anima: | no. Read about animatable |
| Version: | CSS3 |
| JavaScript-Syntax: | object .style.borderImageSlice="30%" 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-slice | 15,0 | 11.0 | 15,0 | 6.0 | 15,0 |
CSS-Syntax
border-image-slice:number|%|fill|initial|inherit;Note: Die border-Bild-Slice - Eigenschaft kann dauern ein bis vier Werte. Wenn der vierte Wert weggelassen wird, ist es dasselbe wie das zweite. Wenn der dritte ebenfalls weggelassen wird, ist es dasselbe wie das erste. Wenn der zweite ebenfalls weggelassen wird, ist es dasselbe wie das erste.
Eigenschaftswerte
| Wert | Beschreibung | Spiel es |
|---|---|---|
| number | Die number(s) stellen Pixel für Rasterbilder oder Koordinaten für Vektorgrafiken | Spiel es " |
| % | Prozentangaben beziehen sich auf die Höhe oder Breite des Bildes in Bezug | Spiel es " |
| fill | Bewirkt, dass der mittlere Teil des Bildes angezeigt werden | 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 |
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-source property - border-image-source property
CSS Referenz: border-image-width property
HTML - DOM - Referenz: borderImageSlice property