Proprietatea outline-offset

Proprietatea outline-offset stabilește decalajul conturului exterior - unei granițe care nu ocupă spațiu. Valoarea proprietății poate fi orice unitate de măsură pentru dimensiuni, cu excepția procentelor. Valoarea implicită este: 0. O valoare pozitivă deplasează conturul în afară din element, iar una negativă - în interior.

Sintaxă

selector {
	outline-offset: valoare;
}

Exemplul . Valoare pozitivă

Conturul se deplasează în afara elementului (acesta este evidențiat cu fundal):

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

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

Exemplul . Valoare negativă

Conturul este poziționat în interiorul elementului:

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

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

Exemplul . Valoare negativă outline + border

Puteți crea un astfel de efect interesant (observați grosimea spațiului alb dintre contururi, este de 10px, nu 14, deoarece o parte a fost "mâncată" de outline datorită grosimii sale de 4px):

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

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

Vedeți și

proprietatea outline-width,
care stabilește grosimea conturului
proprietatea outline-style,
care stabilește stilul conturului
proprietatea outline-color,
care stabilește culoarea conturului
proprietatea outline,
care este o proprietate scurtă (shorthand) pentru contururi