Savybė outline-offset

Savybė outline-offset nustato išorinio kontūro atitraukimą - sienelės, kuri neužima vietos. Savybės reikšmė gali būti bet kuris dydžio vienetas, išskyrus procentus. Numatytoji reikšmė: 0. Teigiama reikšmė stumia kontūrą į išorę nuo elemento, neigiama - į vidų.

Sintaksė

cssselektorius {
  outline-offset: reikšmė;
}

Pavyzdys . Teigiama reikšmė

Kontūras atitrauktas nuo elemento (jis paryškintas fono spalva):

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

Результат:

Pavyzdys . Neigiama reikšmė

Kontūras yra elemento viduje:

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

Результат:

Pavyzdys . Neigiama outline + border reikšmė

Galima sukurti tokį įdomų efektą (atkreipkite dėmesį į baltos tarpos tarp kontūrų storį, jis 10px, o ne 14, nes dalį sudėjo outline savo storiu 4px):

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

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

Результат:

Taip pat žiūrėkite