Eigenschaft border-image-slice

Die Eigenschaft border-image-slice weist den Browser an, welche Teile des Bildes für die Ecken und welche für die Seiten verwendet werden sollen (und welcher Teil der zentrale sein wird). Für die Ecken werden 4 Teile verwendet, für die Seiten werden 4 Teile verwendet und ein Teil (der zentrale) wird für den Hintergrund des Elements verwendet (optional, Schlüsselwort fill).

Für weitere Informationen siehe Eigenschaft border-image.

Syntax

<+css+> Selektor { border-image-slice: von 1-tem bis 4-ten Zahl | von 1-tem bis 4-ten Prozent; } <-css->

Bei Zahlen und Prozenten kann durch Leerzeichen getrennt das Schlüsselwort fill stehen.

Werte

Wert	Beschreibung
Prozente	Prozente werden relativ zur Größe des Bildes berechnet. Horizontale relativ zur Breite, vertikale relativ zur Höhe.
Zahlen	Zahlen sind Pixel (für Rasterbilder) oder Koordinaten (für Vektorbilder). Maßeinheiten werden nicht angegeben.
`fill`	Das Standardverhalten geht davon aus, dass der zentrale Teil des Bildes verworfen wird. Um ihn zu verwenden, muss das Schlüsselwort `fill` zusätzlich zu Zahlen oder Prozenten verwendet werden.

Anzahl der Parameter

Der Versatz kann 1, 2, 3 oder 4 Parameter annehmen. Bitte beachten Sie, dass Maßeinheiten für den Versatz nicht geschrieben werden (z.B. einfach 20, nicht 20px). Die Dicke kann auch in % angegeben werden.

Anzahl Parameter	Beschreibung
`1`	Dicke für alle Seiten gleichzeitig.
`2`	1 2; - `1px` für oben und unten, `2px` für links und rechts.
`3`	`1 2 3`; - `1px` für oben, `2px` für links und rechts, `3px` für unten.
`4`	`1 2 3 4`; - `1px` für oben, `2px` für rechts, `3px` für unten, `4px` für links.

Standardwert: 100%(?).

Beispiel

<div id="elem"></div>

#elem {
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Beispiel

<div id="elem"></div>

#elem {
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-image-repeat: repeat;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Siehe auch

Eigenschaft border-image,
die eine Kurzschreibweise für Bild-Rahmen ist
Eigenschaft border-image-source,
die den Pfad zum Bild für den Rahmen angibt
Eigenschaft border-image-repeat,
die die Wiederholung des Bildes für den Rahmen angibt
Eigenschaft border-image-width,
die die Größe des Bildes für den Rahmen angibt
Eigenschaft border-image-outset,
die den Versatz des Bildes für den Rahmen angibt