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 апрель 2017 г..
CSS-свойство outline-offset задаёт расстояние между обводкой и краем или рамкой элемента.
Интерактивный пример
outline-offset: 4px; outline-offset: 0.6rem; outline-offset: 12px; outline: 5px dashed blue; <section class="default-example" id="default-example"> <div class="transition-all" id="example-element"> This is a box with an outline around it. </div> </section> #example-element { border: 2px solid crimson; outline: 0.75em solid; padding: 0.75em; width: 80%; height: 100px; } Синтаксис
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 |