Egenskaben outline-offset

Egenskaben outline-offset angiver afstanden til det ydre omrids - en grænse, som ikke optager plads. Værdien for egenskaben er enhver enhed for størrelser, bortset fra procenter. Standardværdien er: 0. En positiv værdi forskydder omridset udad fra elementet, en negativ - indad.

Syntaks

cssselector {
  outline-offset: værdi;
}

Eksempel . Positiv værdi

Omridset forskydes fra elementet (det er fremhævet med en baggrund):

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

Результат:

Eksempel . Negativ værdi

Omridset befinder sig inde i elementet:

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

Результат:

Eksempel . Negativ værdi outline + border

Man kan lave en sådan interessant effekt (læg mærke til tykkelsen på det hvide mellemrum mellem grænserne, det er 10px, og ikke 14, da en del blev spist af outline med sin tykkelse på 4px):

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

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

Результат:

Se også