Својство 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,
кое го задава поместувањето на сликата за границата