Хосияти border-image-outset

Хосияти border-image-outset имкон медиҳад, ки ҳудудро аз ҳудуди унсур берун ҷойгир кунад. Ҳамчун қимат рақам бе зикри воҳиди ченак ё ягон воҳиди барои андозаҳо, ғайр аз фоизҳо, муайян карда мешавад. Агар рақам бе воҳид муайян карда шавад, он гоҳ он зарбкунанда аст, ки ба он андозаи хосияти border-width зарб карда мешавад. Қиматҳои манфӣ дастгирӣ намешаванд.

Барои маълумоти муфассалтар дар бораи тасвирҳо барои ҳудуд хосияти border-image-ро бубинед.

Синтаксис

интихобкунанда {
	border-image-outset: рақами мусбӣ;
}

Намуна . Рақам

Қимати border-image-outset-ро ба 3 дар вақти нишондиҳандаи муш ба унсур муқаррар мекунем. Дар ин ҳолат ҳудуд ба 26px*3 - ба 3 маротиба дуртар аз паҳноии он, ки дар border-width муайян шудааст, ҷойивазк карда мешавад:

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

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

Намуна . Пикселҳо

Қимати border-image-outset-ро ба 30px дар вақти нишондиҳандаи муш ба унсур муқаррар мекунем. Дар ин ҳолат ҳудуд ба 30px ҷойивазк карда мешавад:

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

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

Инчунин бубинед

хосияти border-image,
ки барои ҳудуд-тасвир ихтисор аст
хосияти border-image-source,
ки роҳ ба тасвир барои ҳудудро муайян мекунад
хосияти border-image-slice,
ки тақсимкунии тасвир барои ҳудуд аст
хосияти border-image-repeat,
ки такрори тасвир барои ҳудуд аст
хосияти border-image-width,
ки андозаи тасвир барои ҳудудро муайян мекунад