Sifa border-image-repeat

Sifa border-image-repeat inabainisha namna ya kurudia sehemu ya ndani ya mpaka kama picha. Kwa taarifa za kina tazama sifa border-image.

Kisarufu

kichagua {
	border-image-repeat: stretch | repeat | round;
}

Thamani

Idadi ya parameta	Maelezo
`stretch`	Inanyoosha mchoro wa mpaka hadi ukubwa wa kipengele. Thamani hii hutumika kwa default.
`repeat`	Hurudia mchoro wa mpaka.
`round`	Hurudia mchoro na kubadilisha kiwango ili upande wa kipengele uwe nambari kamili ya picha.

Thamani ya default: stretch.

Idadi ya parameta

Inaweza kuchukua 1 au 2 parameta. Ikiwa parameta mbili zimetolewa, basi ya kwanza kati yao itakuwa kwa mpaka wa juu na chini, na parameta ya pili - kwa kushoto na kulia.

Mfano . Thamani 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;
}

Mfano . Thamani 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;
}

Mfano . Thamani round

Sasa katika hali ya kawaida imewekwa thamani repeat, na kwa kuweka kielekezo - round. Kumbuka kuwa kabla ya kuweka kielekezo katika mpaka haijaingizwa nambari kamili ya almasi, na baada ya kuweka kielekezo - nambari kamili. Hivyo ndivyo round inavyofanya kazi:

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

Mfano . Maneno mawili

Thamani repeat kwa upana na stretch kwa urefu:

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

Angalia pia

sifa border-image,
ambayo ni kifupi cha mpaka-picha
sifa border-image-source,
ambayo huweka njia ya picha kwa mpaka
sifa border-image-slice,
ambayo mgawanyiko wa picha kwa mpaka
sifa border-image-width,
ambayo huweka ukubwa wa picha kwa mpaka
sifa border-image-outset,
ambayo huweka kuhama picha kwa mpaka