The border-image-width property

Omadus border-image-width kontrollib piiri nähtava osa laiust ja skaleerib seda. Kui see väärtus on suurem kui laius omaduses border-width, siis piiripilt liigub sisu alla.

Täpsema info saamiseks vaata border-image omadust.

Süntaks

selector {
	border-image-width: CSS ühikud | protsendid | number | auto;
}

Väärtused

Väärtus	Kirjeldus
CSS ühikud	Väärtus määratud CSS ühikutega.
Protsendid	Protsendiväärtused ploki suuruse suhtes, millele piir on antud.
Number	Numbriline väärtus, millega `border-width` korrutatakse.
`auto`	Võtmesõna. Kui see on määratud, on väärtus võrdne vastava `border-image-slice` väärtusega. Kui sobivat suurust pole, kasutatakse `border-width` väärtust ja pilt täidab kogu raami nurga, minnes sisu alla. Parema mõistmise huvides vaata näiteid.

Vaikeväärtus: 1.

Näide . Number

Määrame border-image-width väärtuseks 2, kui hiir element kohal hõljub. Sel juhul muutub piiri suuruseks 26px*2 - 2 korda suurem kui selle laius, mis on määratud omaduses border-width. Piir läheb teksti alla (nagu taust):

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

Näide . Muudame border-image-repeat väärtuseks round

Eelmises hõljumisnäites ei sisalda piir täisarvulist arvu teemante. Parandame selle, määrates border-image-repeat väärtuseks 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;
}

Näide . Protsendid

Määrame border-image-width väärtuseks 50%, kui hiir element kohal hõljub. Sel juhul muutub piir 50% ploki suurusest (st kaks piiri, parem ja vasak, katavad kogu ploki):

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

Näide . Protsendid

Määrame border-image-width väärtuseks 30%, kui hiir element kohal hõljub. Sel juhul muutub piir 30% ploki suurusest:

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

Näide . Pikslid

Määrame border-image-width väärtuseks 50px, kui hiir element kohal hõljub:

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

Näide . Auto väärtus

Määrame border-image-width väärtuseks auto, kui hiir element kohal hõljub.

Enne hõljumist on border-image-width väärtus 1 (vaikimisi). Näites on border-width spetsiaalselt määratud 52px-ks ja border-image-slice on määratud 26-ks (efekti auto-ga on näha ainult siis, kui border-width ei ole võrdne border-image-slice-ga). Tõttu, et border-image-width omab väärtust 1, hõivab piiripilt kogu border-width laiuse, st venib 52px-ni. Hõljumisel määratakse border-image-width väärtus auto-ks ja pildi laius muutub võrdseks border-image-slice väärtusega, st 26px-ks:

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

Vaata ka

omadus border-image
mis on piiripildi lühend
omadus border-image-source
mis määrab pildi asukoha piiri jaoks
omadus border-image-slice
mis määrab pildi lõikamise piiri jaoks
omadus border-image-repeat
mis määrab pildi kordamise piiri jaoks
omadus border-image-outset
mis määrab pildi väljaulatuvuse piiri jaoks