Az outline-offset tulajdonság

A outline-offset tulajdonság a külső körvonal - azon szegély behúzását határozza meg, amely nem foglal helyet. A tulajdonság értéke bármely mértékegység a méretekhez lehet, kivéve százalékot. Alapértelmezett érték: 0. Pozitív érték a körvonalat kifelé tolja el az elemtől, negatív érték - befelé.

Szintaxis

cssszelektor {
  outline-offset: érték;
}

Példa . Pozitív érték

A körvonal eltávolodik az elemtől (az elem hátterrel van kiemelve):

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élda . Negatív érték

A körvonal az elem belsejében helyezkedik el:

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élda . Negatív outline + border érték

Elkészíthető egy ilyen érdekes hatás (figyelj a fehér rés szélességére a szegélyek között, az 10px, nem 14, mert egy részét elvette a outline a maga 4px vastagságával):

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

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

Результат:

Lásd még