Lastnost outline-offset

Lastnost outline-offset določa zamik zunanje obrobe - meje, ki ne zaseda prostora. Vrednost lastnosti so poljubne enote za velikosti, razen odstotkov. Privzeta vrednost: 0. Pozitivna vrednost premakne obrobo navzven od elementa, negativna - navznoter.

Sintaksa

cssselektor {
  outline-offset: vrednost;
}

Primer . Pozitivna vrednost

Obroba se odmika od elementa (označen je s ozadjem):

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

Результат:

Primer . Negativna vrednost

Obroba je znotraj elementa:

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

Результат:

Primer . Negativna vrednost outline + border

Lahko naredite takšen zanimiv učinek (pozorni na debelino belega presledka med obrobami, je 10px, ne 14, ker je del pojedel outline s svojo debelino 4px):

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

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

Результат:

Glejte tudi