Уласцівасць outline-offset

Уласцівасць outline-offset задае адступ вонкавай рамкі - мяжы, якая не займае месца. Значэннем уласцівасці служаць любыя адзінкі вымярэння памераў, акрамя працэнтаў. Значэнне па змаўчанні: 0. Дадатнае значэнне зрушчае рамку вонкі ад элемента, адмоўнае - ўнутр.

Сінтаксіс

cssселектар {
  outline-offset: значэнне;
}

Прыклад . Дадатнае значэнне

Рамка адступае ад элемента (ён вылучаны фоном):

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

Результат:

Прыклад . Адмоўнае значэнне

Рамка знаходзіцца ўнутры элемента:

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

Результат:

Прыклад . Адмоўнае значэнне outline + border

Можна зрабіць такі цікавы эфект (звярніце ўвагу на таўшчыню белага прамежку паміж мяжамі, ён 10px, а не 14, так як частку з'еў outline сваёй таўшчынёй у 4px):

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

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

Результат:

Глядзіце таксама