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

Хосияти border-image-repeat тарзи такрор кардани қисмати дохилии хосиятро ба сурати акс муайян мекунад. Барои маълумоти муфассалтар хосияти border-image-ро бубинед.

Синтаксис

интихобкунанда {
	border-image-repeat: stretch | repeat | round;
}

Қиматҳо

Шумораи параметрҳо	Тавсиф
`stretch`	Акси хосиятро то андозаҳои элемент каш медиҳад. Ин қимат ба таври пешфарз истифода мешавад.
`repeat`	Акси хосиятро такрор мекунад.
`round`	Аксро такрор карда ва онро тавре миқёс медиҳад, ки дар тарафи элемент шумори бутуни аксҳо қарор гирад.

Қимати пешфарз: stretch.

Шумораи параметрҳо

Метавонад 1 ё 2 параметр қабул кунад. Агар ду параметр муайян карда шавад, пас якуми онҳо барои хосияти болоӣ ва поёнӣ, ва параметри дуввум - барои чапӣ ва ростӣ хоҳад буд.

Намуна . Қимати stretch

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

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

Намуна . Қимати repeat

<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;
}

Намуна . Қимати round

Ҳоло дар ҳолати оддӣ қимати repeat насб шудааст, ва баъди ба курсор овардан - round. Диққат диҳед, ки пеш аз ба курсор овардан дар хосият шумори бутуни ромбчаҳо ҷой намегирад, ва баъд аз ба курсор овардан - бутун мешавад. Ин тавр round кор мекунад:

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

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

Намуна . Ду калима

Қимати repeat барои бараш ва stretch барои дарозӣ:

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

#elem {
	border-image-repeat: repeat stretch;
	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;
}

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

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