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

Свойство outline-offset используется для указания пространства между обводкой и краем границы элемента. Пространство между обводкой и элементом является прозрачным.

Обводки отличаются от границ тремя способами:

обводка — это линия, которая рисуется за пределами границы элемента,
обводка может быть непрямоугольной,
обводка не занимает места.

Это свойство входит в число свойств CSS3.

Оно не является частью сокращённого свойства outline. Свойство outline-offset должно указываться отдельно.

Начальное значение	0
Применяется к	Ко всем элементам.
Наследуется	Нет.
Анимация	Да. Ширина пространства анимируется.
Версия	CSS3
Синтаксис DOM	object.style.outlineOffset = "20px";

Синтаксис

Синтаксис CSS outline-offset

css

outline-offset: length | initial | inherit;

Пример свойства outline-offset:

Пример кода CSS outline-offset

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.ex1 {
        margin: 20px;
        border: 2px dotted #000;
        background-color: #8ebf42;
        outline: 4px solid #666;
        outline-offset: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Outline-offset property example</h2>
    <div class="ex1">The outline-offset is 10px</div>
  </body>
</html>

Try it Yourself »

Результат

CSS outline-offset values list

В приведённом примере пространство между обводкой и границей составляет 10px.

Значения

Значение	Описание
length	Пространство между обводкой и краем границы элемента. Значение по умолчанию — 0.
initial	Устанавливает свойству его значение по умолчанию.
inherit	Наследует свойство от родительского элемента.

Практика

Что можно сказать о свойстве CSS outline-offset согласно информации, приведённой в данном URL?

Свойство outline-offset не является частью стандарта CSS.Свойство outline-offset добавляет пространство между обводкой и краем/границей элемента.Свойство outline-offset допускает только положительные значения, а значение по умолчанию равно 0.Начальное/значение по умолчанию свойства outline-offset равно 0.Свойство outline-offset наследует значение от родительского элемента.Со свойством outline-offset можно использовать значения в процентах.

Свойство CSS outline-offset ​

Синтаксис ​

Пример свойства outline-offset: ​

Результат ​