Omadus border-image-outset

Omadus border-image-outset võimaldab nihutada raami väljapoole elementi. Väärtusena määratakse number ilma mõõtühikuteta või mis tahes suuruse ühikud, välja arvatud protsendid. Kui on määratud number ilma ühikuteta, siis on see kordaja, millega korrutatakse omaduse border-width väärtusi. Negatiivsed väärtused ei ole toetatud.

Täpsema teabe saamiseks piiripiltide kohta vaadake omadust border-image.

Süntaks

selektor {
	border-image-outset: positiivne number;
}

Näide . Number

Määrame border-image-outset väärtuseks 3 elemendile hiirega viibimisel. Sel juhul nihkub piir 26px*3 võrra - 3 korda kaugemale kui selle laius, mis on määratud omaduses 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;
}

Näide . Pikslid

Määrame border-image-outset väärtuseks 30px elemendile hiirega viibimisel. Sel juhul nihkub piir 30px võrra:

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

Vaata ka

omadus border-image,
mis on piiripildi lühend
omadus border-image-source,
mis määrab tee piiripildile
omadus border-image-slice,
mis lõikab piiripildi osadeks
omadus border-image-repeat,
mis kordab piiripilti
omadus border-image-width,
mis määrab piiripildi suuruse