CSS Eigenschaft border-image-slice
Beispiel
Geben Sie an, wie das Rahmenbild aufgeteilt werden soll:
#borderimg {
border-image-slice: 30%;
}
Definition und Verwendung
Die border-image-sliceEigenschaft gibt an, wie das durch
border-image-source angegebene Bild aufgeteilt wird . Das Bild wird immer in neun Abschnitte geschnitten: vier Ecken, vier Kanten und die Mitte.
Der "mittlere" Teil wird als vollständig transparent behandelt, es sei denn, das Schlüsselwort fill ist gesetzt.
Tipp: Sehen Sie sich auch die Eigenschaft border-image an (eine abgekürzte Eigenschaft zum Festlegen aller Eigenschaften border-image-*).
| Standardwert: | 100% |
|---|---|
| Vererbt: | Nein |
| Animierbar: | Nein. Lesen Sie mehr über animierbare |
| Ausführung: | CSS3 |
| JavaScript-Syntax: | Objekt .style.borderImageSlice="30%" |
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt.
| Property | |||||
|---|---|---|---|---|---|
| border-image-slice | 15.0 | 11.0 | 15.0 | 6.0 | 15.0 |
CSS-Syntax
border-image-slice: number|%|fill|initial|inherit;
Hinweis: Die border-image-sliceEigenschaft kann einen bis vier Werte annehmen. Wenn der vierte Wert weggelassen wird, ist er derselbe wie der zweite. Wenn auch der dritte weggelassen wird, ist er gleich dem ersten. Wenn auch der zweite weggelassen wird, ist er der erste.
Eigenschaftswerte
| Value | Description | Play it |
|---|---|---|
| number | The number(s) represent pixels for raster images or coordinates for vector images | |
| % | Percentages are relative to the height or width of the image | |
| fill | Causes the middle part of the image to be displayed | |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
Verwandte Seiten
CSS-Tutorial: CSS-Randbilder
CSS-Referenz: border-image-Eigenschaft
CSS-Referenz: Eigenschaft border-image-outset
CSS-Referenz: Eigenschaft border-image-repeat
CSS-Referenz: Eigenschaft border-image-source
CSS-Referenz: Eigenschaft border-image-width
HTML-DOM-Referenz: Eigenschaft borderImageSlice