css властивість outline-offset

Властивість outline-offset встановлює відстань між контуром та кордоном елемента (властивість border).

Без задання контури розташовані безпосередньо біля краю кордону. Використовуючи outline-offset, ви можете ромістити за межами кордону.

Простір між елементом та його контуром прозорий; іншими словами, той же самий, що і фон батьківського елемента.

правити

+ додати пораду чи нотатку

Синтаксис

outline-offset: length|initial|inherit;

Властивість outline-offset може отримувати 3 значень:

length

Задає між контуром та кордоном елемента. Від'ємне значення відобразить контур всередині елемента, додатнє - навколо елемента.

автор: Svitlana

правити

initial

Встановлює властивість у значення без задання

автор: Svitlana

правити

inherit

Вказує на спадковість властивості від свого батьківського елемента.

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
outline-offset	1.0	1.5	3.1	12.1	15.0	Не підтримується

Підтримка: мобільні переглядачі

Переглядач
outline-offset	1.0	1.5	3.2

Приклади

+ запропонувати свій приклад у пісочниці

<div>Контур відсунуто на 15px від рамки.</div>

div {
    border: 2px solid black;
    outline: 2px solid red;
    outline-offset: 15px;
    margin: 20px;
    padding: 8px;
}

<div class="off0">outline-offset: 0</div>
<div class="off15">outline-offset: 15px</div>

div {
    border: 2px solid black;
    outline: 2px solid red;
    margin: 24px;
    padding: 8px;
}

.off0  { outline-offset: 0; }
.off15 { outline-offset: 15px; }