Savybė outline-offset

Savybė outline-offset nustato išorinio kontūro atitraukimą - sienelės, kuri neužima vietos. Savybės reikšmė gali būti bet kuris dydžio vienetas, išskyrus procentus. Numatytoji reikšmė: 0. Teigiama reikšmė stumia kontūrą į išorę nuo elemento, neigiama - į vidų.

Sintaksė

selektorius {
	outline-offset: reikšmė;
}

Pavyzdys . Teigiama reikšmė

Kontūras atitrauktas nuo elemento (jis paryškintas fono spalva):

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

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

Pavyzdys . Neigiama reikšmė

Kontūras yra elemento viduje:

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

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

Pavyzdys . Neigiama outline + border reikšmė

Galima sukurti tokį įdomų efektą (atkreipkite dėmesį į baltos tarpos tarp kontūrų storį, jis 10px, o ne 14, nes dalį sudėjo outline savo storiu 4px):

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

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

Taip pat žiūrėkite

savybė outline-width,
kuri nustato kontūro storį
savybė outline-style,
kuri nustato kontūro stilių
savybė outline-color,
kuri nustato kontūro spalvą
savybė outline,
kuri yra trumpinys kontūrų savybėms