свойство CSS `outline-offset`

Базовая версия Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и во многих версиях браузеров. Она доступна во всех браузерах с апреля 2017 года.

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

Попробуйте

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

Синтаксис

/* <length> values */
outline-offset: 3px;
outline-offset: 0.2em;

/* Global values */
outline-offset: inherit;
outline-offset: initial;
outline-offset: revert;
outline-offset: revert-layer;
outline-offset: unset;

Значения

<length>: Ширина пространства между элементом и его контуром. Отрицательное значение размещает контур внутри элемента. Значение 0 размещает контур так, что между ним и элементом нет пространства.

Описание

Контур — это линия, нарисованная вокруг элемента за пределами края границы. Пространство между элементом и его контуром прозрачно. Другими словами, оно совпадает с фоном родительского элемента.

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

Начальное значение	0
Применяется к	всем элементам
Наследуется	нет
Вычисленное значение	абсолютное `<length>`, округлённое до ширины линии
Тип анимации	значение <a href="/en-US/docs/Web/CSS/Reference/Values/length#interpolation" title="Значения типа данных CSS <length> интерполируются как действительные числа с плавающей точкой.">длина</a>

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

outline-offset = 
  <length>

Примеры

Задание смещения контура в пикселях

HTML

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

CSS

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

Результат

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

Спецификация
Модуль базового пользовательского интерфейса CSS, уровень 4 # outline-offset

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

	Настольные компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome для Android	Firefox для Android	Opera для Android	Safari на iOS	Samsung Internet	WebView для Android	WebView на iOS
`outline-offset`	1	15	1.5 До Firefox 88 контур не повторяет форму `border-radius`.	9.5	1.2	18	4 До Firefox для Android 88 контур не повторяет форму `border-radius`.	14	1	1.0	37	1

См. также

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/outline-offset