Ominaisuus outline-offset

Ominaisuus outline-offset asettaa ulkoisen ääriviivan - reunan, joka ei vie tilaa - sisennystä. Ominaisuuden arvona toimivat mitkä tahansa koko-yksiköt, prosentteja lukuun ottamatta. Oletusarvo: 0. Positiivinen arvo siirtää ääriviivaa ulospäin elementistä, negatiivinen - sisäänpäin.

Syntaksi

valitsija {
	outline-offset: arvo;
}

Esimerkki . Positiivinen arvo

Ääriviiva on siirtynyt elementistä (se on korostettu taustalla):

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

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

Esimerkki . Negatiivinen arvo

Ääriviiva on elementin sisällä:

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

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

Esimerkki . Negatiivinen outline + border arvo

Voit tehdä tällaisen mielenkiintoisen vaikutuksen (huomaa valkoisen välin paksuus rajojen välillä, se on 10px, eikä 14, koska osan söi outline sen paksuudella 4px):

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

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

Katso myös

ominaisuus outline-width,
joka asettaa ääriviivan paksuuden
ominaisuus outline-style,
joka asettaa ääriviivan tyylin
ominaisuus outline-color,
joka asettaa ääriviivan värin
ominaisuus outline,
joka on lyhennysominaisuus ääriviivoille