Egenskapen outline-offset

Egenskapen outline-offset angir avstanden til den ytre rammen - en grense som ikke tar opp plass. Verdien til egenskapen kan være alle enheter for størrelser, bortsett fra prosent. Standardverdi: 0. En positiv verdi forskyver rammen utover fra elementet, en negativ - innover.

Syntaks

cssvelger {
  outline-offset: verdi;
}

Eksempel . Positiv verdi

Rammen forskyves fra elementet (det er markert med bakgrunn):

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 verdi

Rammen befinner seg inni 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 verdi for outline + border

Man kan lage en slik interessant effekt (legg merke til tykkelsen på det hvite mellomrommet mellom grensene, det er 10px, og ikke 14, siden en del ble tatt av 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å