Свойство border-image-slice

Свойството border-image-slice указва на браузъра кои части от изображението ще отидат за ъглите, а кои за страните (и коя част ще бъде централна). За ъглите отиват 4 части, за страните отиват 4 части и една част (централната) отива за фона на елемента (по избор, ключовата дума fill).

За по-подробна информация вижте свойството border-image.

Синтаксис

<+css+> селектор { border-image-slice: от 1-ви до 4-ти числа | от 1-ви до 4-ти процента; } <-css->

С числа и проценти чрез интервал може да стои ключовата дума fill.

Стойности

Стойност	Описание
проценти	Процентите се изчисляват спрямо размера на изображението. Хоризонталните спрямо ширината, вертикалните — спрямо височината.
числа	Числата са пиксели (за растерно изображение) или координати (за векторно). Мерните единици не се посочват.
`fill`	Поведението по подразбиране предполага, че централната част на изображението ще бъде изхвърлена. За да се използва тя, е необходимо да се използва ключовата дума `fill` в допълнение към числата или процентите.

Брой параметри

Отместването може да приема 1, 2, 3 или 4 параметъра. Обърнете внимание на това, че мерните единици за отместване не се пишат (например, просто 20, а не 20px). Също може да се зададе дебелина в %.

Брой параметри	Описание
`1`	Дебелина за всички страни едновременно.
`2`	1 2; - `1px` за горе и долу, `2px` за ляво и дясно.
`3`	`1 2 3`; - `1px` за горе, `2px` за ляво и дясно, `3px` за долу.
`4`	`1 2 3 4`; - `1px` за горе, `2px` за дясно, `3px` за долу, `4px` за ляво.

Стойност по подразбиране: 100%(?).

Пример

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

Пример

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

Вижте също

свойство border-image,
което е съкращение за граница-изображение
свойство border-image-source,
което задава пътя към изображението за границата
свойство border-image-repeat,
което задава повторението на изображението за границата
свойство border-image-width,
което задава размера на изображението за границата
свойство border-image-outset,
което задава отместване на изображението за границата