Omadus border-image-repeat

Omadus border-image-repeat määrab piiripildi sisuosa kordamise viisi. Täpsema teabe saamiseks vaadake omadust border-image.

Süntaks

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

Väärtused

Väärtus	Kirjeldus
`stretch`	Venitab piiripildi elemendi mõõtmeteni. See vaikeväärtus.
`repeat`	Kordab piiripilti.
`round`	Kordab pilti ja skaleerib seda nii, et elemendi küljele mahtuks täisarv piltidest.

Vaikeväärtus: stretch.

Parameetrite arv

Võib võtta 1 või 2 parameetrit. Kui on määratud kaks parameetrit, siis esimene neist kehtib ülemise ja alumise piiri jaoks ning teine parameeter - vasaku ja parema piiri jaoks.

Näide . Väärtus 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;
}

Näide . Väärtus 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;
}

Näide . Väärtus round

Praegu on tavaseisundis määratud väärtus repeat, ning pealelehel - round. Pange tähele, et enne pealelehet ei mahu piiridesse täisarv rombe, kuid peale pealelehet - täisarv. Nii see round töötab:

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

Näide . Kaks sõna

Väärtus repeat laiuse jaoks ning stretch kõrguse jaoks:

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

Vaata ka

omadus border-image,
mis on lühend piiripildi jaoks
omadus border-image-source,
mis määrab tee pildile piiri jaoks
omadus border-image-slice,
mis lõikab pildi piiri jaoks
omadus border-image-width,
mis määrab pildi suuruse piiri jaoks
omadus border-image-outset,
mis määrab pildi nihke piiri jaoks