Egenskaben outline-offset

Egenskaben outline-offset angiver afstanden til det ydre omrids - en grænse, som ikke optager plads. Værdien for egenskaben er enhver enhed for størrelser, bortset fra procenter. Standardværdien er: 0. En positiv værdi forskydder omridset udad fra elementet, en negativ - indad.

Syntaks

selector {
	outline-offset: værdi;
}

Eksempel . Positiv værdi

Omridset forskydes fra elementet (det er fremhævet med en baggrund):

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

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

Eksempel . Negativ værdi

Omridset befinder sig inde i 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;
}

Eksempel . Negativ værdi outline + border

Man kan lave en sådan interessant effekt (læg mærke til tykkelsen på det hvide mellemrum mellem grænserne, det er 10px, og ikke 14, da en del blev spist af outline med sin tykkelse på 4px):

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

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

Se også

egenskaben outline-width,
som angiver omridsets tykkelse
egenskaben outline-style,
som angiver omridsets stil
egenskaben outline-color,
som angiver omridsets farve
egenskaben outline,
som er en sammentrækningsegenskab for omridser