Vlastnost outline-offset

Vlastnost outline-offset nastavuje odsazení vnějšího obrysového rámečku - hranice, která nezabírá místo. Hodnotou vlastnosti jsou libovolné jednotky pro velikosti, kromě procent. Výchozí hodnota je: 0. Kladná hodnota posouvá rámeček směrem ven od elementu, záporná - dovnitř.

Syntaxe

cssselektor {
  outline-offset: hodnota;
}

Příklad . Kladná hodnota

Obrysový rámeček je odsazen od elementu (element je zvýrazněn 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;
}

Результат:

Příklad . Záporná hodnota

Obrysový rámeček se nachází uvnitř elementu:

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

Результат:

Příklad . Záporná hodnota outline + border

Lze vytvořit takovýto zajímavý efekt (všimněte si šířky bílého mezery mezi hranicemi, je 10px, nikoli 14, protože část pohltil outline svou tloušťkou 4px):

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

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

Результат:

Viz také