Својство border-image-width

Својството border-image-width ја контролира ширината на видливиот дел од рамката, ја скалира истата. Ако оваа вредност е поголема од ширината border-width, сликата на рамката ќе се провлече под содржината.

За повеќе детални информации, погледнете го својството border-image.

Синтакса

селектор {
	border-image-width: CSS единици | проценти | број | auto;
}

Вредности

Вредност	Опис
CSS единици	Вредност во зададените CSS единици.
Проценти	Вредности во проценти во однос на големината на блокот на кој му е зададена границата.
Број	Бројчена вредност со која се множи `border-width`.
`auto`	Клучен збор. Ако е зададен, вредноста е еднаква на соодветната `border-image-slice`. Ако нема соодветна големина, се користи вредноста `border-width`, при што сликата ја исполнува целата аголна рамка, провлекувајќи се под содржината. Погледнете ги примерите за подобро разбирање.

Стандардна вредност: 1.

Пример . Број

Да ја поставиме вредноста border-image-width на 2 при преминување со глушецот над елементот. При тоа границата ќе стане со големина 26px*2 - 2 пати поголема од нејзината ширина, зададена во border-width. Границата при тоа ќе замине под текстот (како позадина):

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

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

Пример . Да го смениме border-image-repeat на round

Во претходниот пример, при преминување со глушецот, во границата нема да има целоброен број ромбови. Да го поправиме ова, поставувајќи го border-image-repeat на вредноста round:

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

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

Пример . Проценти

Да ја поставиме вредноста border-image-width на 50% при преминување со глушецот над елементот. При тоа границата ќе стане со големина 50% од големината на блокот (што значи две граници, десната и левата, ќе го покријат целиот блок):

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

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

Пример . Проценти

Да ја поставиме вредноста border-image-width на 30% при преминување со глушецот над елементот. При тоа границата ќе стане со големина 30% од големината на блокот:

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

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

Пример . Пиксели

Да ја поставиме вредноста border-image-width на 50px при преминување со глушецот над елементот:

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

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

Пример . Вредност auto

Да ја поставиме вредноста border-image-width на auto при преминување со глушецот над елементот.

Пред преминување border-image-width има вредност 1 (стандардно). Во примерот специјално border-width е зададено на 52px, а border-image-slice - на вредност 26 (ефектот со auto ќе се забележи само ако border-width не е еднакво на border-image-slice). Поради тоа што border-image-width има вредност 1, сликата на границата ќе ја заземе целата ширина на border-width, односно ќе се растегне на 52px. При преминување вредноста border-image-width ќе се постави на auto и ширината на сликата ќе стане еднаква на вредноста border-image-slice, односно 26px:

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

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

Погледнете ги исто така

својството border-image,
кое е кратенка за граница-слика
својството border-image-source,
кое го задава патот до сликата за границата
својството border-image-slice,
кое сечење на сликата за границата
својството border-image-repeat,
кое повторување на сликата за границата
својството border-image-outset,
кое задава поместување на сликата за границата