Svojstvo outline-offset

Svojstvo outline-offset postavlja odstup spoljnog okvira - granice, koja ne zauzima mesto. Vrednošću svojstva služe bilo koje jedinice za veličine, osim procenata. Podrazumevana vrednost: 0. Pozitivna vrednost pomera okvir ka spolja od elementa, negativna - ka unutra.

Sintaksa

selektor {
	outline-offset: vrednost;
}

Primer . Pozitivna vrednost

Okvir odstupa od elementa (on je istaknut pozadinom):

<div id="elem"></div>

#elem {
	outline-offset: 5px;
	outline-width: 1px;
	outline-style: solid;
	outline-color: black;
	background-color: #e4f1ed;
	width: 300px;
	height: 100px;
}

Primer . Negativna vrednost

Okvir se nalazi unutar elementa:

<div id="elem"></div>

#elem {
	outline-offset: -10px;
	outline-width: 1px;
	outline-style: solid;
	outline-color: black;
	background-color: #e4f1ed;
	width: 300px;
	height: 100px;
}

Primer . Negativna vrednost outline + border

Možete napraviti ovakav interesantan efekat (obratite pažnju na debljinu belog razmaka između granica, on je 10px, a ne 14, pošto je deo pojeo outline svojom debljinom od 4px):

<div id="elem"></div>

#elem {
	outline-offset: -14px;
	outline: 4px solid green;
	border: 4px solid red;
	width: 300px;
	height: 100px;
}

Pogledajte takođe

svojstvo outline-width,
koje postavlja debljinu okvira
svojstvo outline-style,
koje postavlja stil okvira
svojstvo outline-color,
koje postavlja boju okvira
svojstvo outline,
koje je svojstvo skraćenica za okvire