Свойство CSS outline-offset
Свойство CSS outline-offset задаёт ширину пространства между обводкой и границей элемента. Значения и примеры.
Свойство outline-offset задаёт величину пространства между обводкой элемента и краем его рамки. Пространство, добавляемое outline-offset, всегда прозрачно — сквозь него просвечивает фон страницы (или то, что находится позади элемента).
На этой странице рассказывается, что делает outline-offset, как ведут себя положительные и отрицательные значения, когда стоит его использовать и на какие подводные камни следует обратить внимание.
Чем обводки отличаются от рамок
outline-offset имеет смысл только при понимании того, как работают обводки, поскольку они ведут себя совсем иначе, чем рамки:
- Обводка рисуется снаружи края рамки элемента — по умолчанию она вплотную примыкает к рамке.
- Обводка не занимает место в макете, поэтому её добавление или смещение никогда не сдвигает соседние элементы.
- Обводка может быть непрямоугольной (например, она охватывает каждую строку многострочного строчного элемента).
Поскольку обводка не влияет на макет, outline-offset — безопасный способ отодвинуть обводку от элемента (или внутрь него) без перепотока страницы. Это свойство входит в число свойств CSS3.
Оно не является частью сокращённого свойства outline. В отличие от outline-style, outline-color и outline-width, свойство outline-offset всегда нужно задавать отдельным объявлением.
| Начальное значение | 0 |
|---|---|
| Применяется к | Всем элементам. |
| Наследуется | Нет. |
| Анимируемо | Да. Ширина пространства поддаётся анимации. |
| Версия | CSS3 |
| DOM Syntax | object.style.outlineOffset = "20px"; |
Синтаксис
Синтаксис CSS outline-offset
outline-offset: length | initial | inherit;Пример использования свойства outline-offset:
Пример кода CSS outline-offset
<!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>Результат
В приведённом примере пространство между обводкой и рамкой составляет 10px, а фон страницы просвечивает сквозь этот прозрачный зазор.
Отрицательные значения
outline-offset принимает и отрицательные длины. Отрицательное смещение втягивает обводку внутрь, и она рисуется поверх области отступов/содержимого элемента, а не вокруг него:
outline-offset: -5px; /* outline moves 5px inside the border edge */Это удобно, когда нужно кольцо фокуса, расположенное внутри плотно упакованного элемента (например, кнопки, вплотную примыкающей к краю контейнера), чтобы обводка не обрезалась предком с overflow: hidden. Отрицательное смещение, превышающее размер элемента, приводит к схлопыванию и исчезновению обводки.
Когда использовать
- Кольца фокуса с отступом. Используйте
:focus-visibleс небольшим положительным смещением, чтобы кольцо фокуса клавиатуры не теснило элемент. Никогда не убирайте обводку полностью без предоставления замены — она является основным индикатором для пользователей клавиатуры. - Декоративный эффект «двойной рамки» без добавления второго элемента: зазор смещения открывает фон.
- Предотвращение обрезки колец внутри контейнеров с прокруткой с помощью небольшого отрицательного смещения.
Значения
| Значение | Описание |
|---|---|
| length | Пространство между обводкой и краем рамки элемента. Может быть отрицательным, чтобы нарисовать обводку внутри края рамки. Значение по умолчанию — 0. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Наследует свойство от родительского элемента. |
Важно помнить
outline-offsetне наследуется — дочерние элементы не получают его автоматически.- Процентные значения не допускаются; работают только единицы
length(px,em,remи т.д.). - Смещение отображается только тогда, когда обводка действительно видима, то есть когда outline-style не равен
noneи ширина больше нуля. - Зазор прозрачен —
outline-offsetнельзя задать собственный цвет.