Eigenschap outline-offset

De eigenschap outline-offset bepaalt de afstand van de buitenste omtrek - een rand die geen ruimte inneemt. De waarde van de eigenschap kan elke eenheid voor afmetingen zijn, behalve percentages. Standaardwaarde: 0. Een positieve waarde verschuift de omtrek naar buiten toe van het element, een negatieve waarde - naar binnen.

Syntaxis

selector {
	outline-offset: waarde;
}

Voorbeeld . Positieve waarde

De omtrek staat op afstand van het element (het is gemarkeerd met een achtergrond):

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

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

Voorbeeld . Negatieve waarde

De omtrek bevindt zich binnenin het element:

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

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

Voorbeeld . Negatieve outline + border waarde

Je kunt zo'n interessant effect creëren (let op de dikte van de witte tussenruimte tussen de randen, deze is 10px, niet 14, omdat een deel ervan is opgevuld door de outline met een dikte van 4px):

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

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

Zie ook

de eigenschap outline-width,
die de dikte van de omtrek bepaalt
de eigenschap outline-style,
die de stijl van de omtrek bepaalt
de eigenschap outline-color,
die de kleur van de omtrek bepaalt
de eigenschap outline,
die de shorthand-eigenschap is voor omtrekken