Vlastnosť outline-offset

Vlastnosť outline-offset nastavuje odsadenie vonkajšieho obrysu - hranice, ktorá nezaberá miesto. Hodnotou vlastnosti sú ľubovoľné jednotky pre veľkosti, okrem percent. Predvolená hodnota je: 0. Kladná hodnota posúva obrys von od prvku, záporná - dovnútra.

Syntax

cssselektor {
  outline-offset: hodnota;
}

Príklad . Kladná hodnota

Obrys sa odsadzuje od prvku (prvok je zvýraznený pozadím):

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;
}

Результат:

Príklad . Záporná hodnota

Obrys sa nachádza vo vnútri prvku:

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;
}

Результат:

Príklad . Záporná hodnota outline + border

Môžete vytvoriť takýto zaujímavý efekt (venujte pozornosť hrúbke bieleho medzery medzi hranicami, je 10px, nie 14, pretože časť zjedol outline svojou hrúbkou 4px):

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

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

Результат:

Pozri tiež