Хосияти 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,
ки ҷойивазкунии тасвирро барои катор муайян мекунад