Właściwość border-image-slice

Właściwość border-image-slice wskazuje przeglądarce, które części obrazka pójdą na rogie, a które na boki (i która część będzie centralna). Na rogi idą 4 części, na boki idą 4 części i jedna część (centralna) idzie na tło elementu (opcjonalnie, słowo kluczowe fill).

Dla bardziej szczegółowych informacji zobacz właściwość border-image.

Składnia

<+css+> selektor { border-image-slice: od 1-go do 4-ch liczb | od 1-go do 4-ch procentów; } <-css->

Z liczbami i procentami przez spację może stać słowo kluczowe fill.

Wartości

Wartość	Opis
procenty	Procenty są obliczane względem rozmiaru obrazka. Poziome względem szerokości, pionowe — względem wysokości.
liczby	Liczby - to piksele (dla obrazka rastrowego) lub współrzędne (dla wektorowego). Jednostki miary nie są podawane.
`fill`	Domyślne zachowanie zakłada, że centralna część obrazka będzie odrzucona. Aby ją wykorzystać, konieczne jest użycie słowa kluczowego `fill` w dodatku do liczb lub procentów.

Liczba parametrów

Przesunięcie może przyjmować 1, 2, 3 lub 4 parametrów. Zwróć uwagę na to, że jednostki miary dla przesunięcia nie są pisane (na przykład po prostu 20, a nie 20px). Również można ustawiać grubość w %.

Liczba parametrów	Opis
`1`	Grubość dla wszystkich stron jednocześnie.
`2`	1 2; - `1px` dla góry i dołu, `2px` dla lewej i prawej.
`3`	`1 2 3`; - `1px` dla góry, `2px` dla lewej i prawej, `3px` dla dołu.
`4`	`1 2 3 4`; - `1px` dla góry, `2px` dla prawej, `3px` dla dołu, `4px` dla lewej.

Wartość domyślna: 100%(?).

Przykład

<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;
}

Przykład

<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;
}

Zobacz też

właściwość border-image,
która jest skrótem dla obramowania-obrazka
właściwość border-image-source,
która ustawia ścieżkę do obrazka dla obramowania
właściwość border-image-repeat,
która powtarza obrazek dla obramowania
właściwość border-image-width,
która ustawia rozmiar obrazka dla obramowania
właściwość border-image-outset,
która ustawia przesunięcie obrazka dla obramowania