Lastnost border-image-outset

Lastnost border-image-outset omogoča premik obrobe zunaj meja elementa. Kot vrednost je navedena številka brez navedbe merskih enot ali katere koli merske enote za velikosti, razen odstotkov. Če je navedena številka brez enot, potem je to množitelj, s katerim se pomnožijo vrednosti lastnosti border-width. Negativne vrednosti niso podprte.

Za podrobnejše informacije o slikah za obrobe glejte lastnost border-image.

Sintaksa

selektor {
	border-image-outset: pozitivno število;
}

Primer . Število

Nastavimo vrednost border-image-outset na 3 ob preletu miške preko elementa. Pri tem se bo obrobje premaknilo za 26px*3 - 3 krat dlje, kot je njena širina, določena v 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;
}

Primer . Piksli

Nastavimo vrednost border-image-outset na 30px ob preletu miške preko elementa. Pri tem se bo obrobje premaknilo za 30px:

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

Glejte tudi

lastnost border-image,
ki je okrajšava za obrobno sliko
lastnost border-image-source,
ki določa pot do slike za obrobo
lastnost border-image-slice,
ki razreže sliko za obrobo
lastnost border-image-repeat,
ki ponavlja sliko za obrobo
lastnost border-image-width,
ki določa velikost slike za obrobo