outline-offset

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.

CSS-свойство outline-offset задаёт расстояние между обводкой и краем или рамкой элемента.

Интерактивный пример

Синтаксис

css
/* Значения <length> */
outline-offset: 3px;
outline-offset: 0.2em;

/* Глобальные значения */
outline-offset: inherit;
outline-offset: initial;
outline-offset: revert;
outline-offset: revert-layer;
outline-offset: unset;

Значения

<length>

Размер расстояния между элементом и его обводкой. При отрицательном значении обводка располагается внутри элемента. Значение 0 размещает обводку вплотную к элементу.

Описание

Обводка — это линия вокруг элемента за пределами рамки. Расстояние между элементом и его обводкой прозрачно. Другими словами, оно будет таким же, как и фон родительского элемента.

Формальное определение

Начальное значение0
Применяется квсе элементы
Наследуетсянет
Обработка значениякак указано, но с относительной длиной, конвертируемой в абсолютные длины
Animation typeдлина

Формальный синтаксис

outline-offset = 
  <length>

Примеры

Расстояние обводки в пикселях

HTML

html
<p>Gallia est omnis divisa in partes tres.</p>

CSS

css
p {
  outline: 1px dashed red;
  outline-offset: 10px;
  background: yellow;
  border: 1px solid blue;
  margin: 15px;
}

Результат

Спецификации

Specification
CSS Basic User Interface Module Level 4
# outline-offset

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также