A border-image-outset tulajdonság

A border-image-outset tulajdonság lehetővé teszi a szegély képének az elem határain túli eltolását. Értékként mértékegység nélküli szám vagy bármilyen méretmértékegység ható meg, kivéve százalékot. Ha mértékegység nélküli szám van megadva, akkor az egy szorzó, amellyel a border-width tulajdonság értékei szorozódnak. Negatív értékek nem támogatottak.

A szegényképekkel kapcsolatos részletesebb információkért lásd a border-image tulajdonságot.

Szintaxis

szelektor {
	border-image-outset: pozitív szám;
}

Példa . Szám

Állítsuk a border-image-outset értékét 3-ra, amikor az egeret az elem fölé visszük. Ekkor a szegély 26px*3-ra tolódik el - 3-szor messzebbre, mint a border-width tulajdonsággal megadott szélessége:

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

Példa . Pixelek

Állítsuk a border-image-outset értékét 30px-ra, amikor az egeret az elem fölé visszük. Ekkor a szegély 30px-ra tolódik el:

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

Lásd még

a border-image tulajdonság,
ami a szegénykép rövidítése
a border-image-source tulajdonság,
ami a szegénykép forrását határozza meg
a border-image-slice tulajdonság,
ami a szegénykép felosztását határozza meg
a border-image-repeat tulajdonság,
ami a szegénykép ismétlését határozza meg
a border-image-width tulajdonság,
ami a szegénykép méretét határozza meg