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ă

cssselector {
  outline-offset: valoare;
}

Exemplul . Valoare pozitivă

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

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

css#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:

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

css#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):

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

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

Результат:

Vedeți și