Уласцівасць 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,
якое задае зрух карцінкі для мяжы