Egenskapen outline-offset

Egenskapen outline-offset sätter avståndet för den yttre konturen - en gräns som inte tar upp plats. Värdet på egenskapen kan vara vilken enhet för storlekar som helst, förutom procent. Standardvärde: 0. Ett positivt värde förskjuter konturen utåt från elementet, ett negativt - inåt.

Syntax

selektor {
	outline-offset: värde;
}

Exempel . Positivt värde

Konturen förskjuts från elementet (det är markerat med bakgrund):

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

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

Exempel . Negativt värde

Konturen finns inuti elementet:

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

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

Exempel . Negativt värde outline + border

Man kan skapa en sådan intressant effekt (notera tjockleken på det vita mellanrummet mellan gränserna, det är 10px, inte 14, eftersom en del åts upp av outline med sin tjocklek på 4px):

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

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

Se även

egenskapen outline-width,
som sätter konturens tjocklek
egenskapen outline-style,
som sätter konturens stil
egenskapen outline-color,
som sätter konturens färg
egenskapen outline,
som är en genvägsegenskap för konturer