Egenskapen outline-offset

Egenskapen outline-offset angir avstanden til den ytre rammen - en grense som ikke tar opp plass. Verdien til egenskapen kan være alle enheter for størrelser, bortsett fra prosent. Standardverdi: 0. En positiv verdi forskyver rammen utover fra elementet, en negativ - innover.

Syntaks

velger {
	outline-offset: verdi;
}

Eksempel . Positiv verdi

Rammen forskyves fra elementet (det er markert med bakgrunn):

<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 verdi

Rammen befinner seg inni 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 verdi for outline + border

Man kan lage en slik interessant effekt (legg merke til tykkelsen på det hvite mellomrommet mellom grensene, det er 10px, og ikke 14, siden en del ble tatt av 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å

egenskapen outline-width,
som angir tykkelsen på rammen
egenskapen outline-style,
som angir stilen på rammen
egenskapen outline-color,
som angir fargen på rammen
egenskapen outline,
som er en sammensatt egenskap for rammer