outline-offsetСвойство в CSS смещениям определенного контура от края границы Элемента путем указанной суммы. Контур, который отличается от границы, не занимает места на странице (например, абсолютно позиционированный элемент), поэтому контур может быть смещен на любую величину, и это не повлияет на положение или расположение окружающих элементов.
.example ( outline: solid 2px blue; outline-offset: 10px; )Контуры, определенные с помощью этого outlineсвойства, часто используются в качестве колец фокусировки для удобства. Таким образом, outline-offsetсвойство позволяет изменять положение кольца фокусировки.
Значения
outline-offset принимает один вид значения, длину, которая может быть:
0(по умолчанию)- Любая другая допустимая длина с указанной единицей измерения (включая отрицательные значения)
Обратите внимание, что outline-offsetвроде outline-widthне принимает процентные значения.
Расположение контура
По умолчанию контур элемента рисуется сразу за пределами границы (или сразу за пределами того места, где граница будет нарисована, если граница была определена). Следовательно, технически возможно объединить контур и границу для создания эффекта двух границ:
Оттуда outline-offsetможно использовать для изменения положения контура относительно края границы. Попробуйте демонстрацию ниже, которая позволяет вам интерактивно изменять значение смещения контура с помощью ползунка. Значение смещения отображается на странице при перемещении ползунка:
Как упоминалось выше, outline-offsetпринимает отрицательные значения, которые смещают контур в противоположном направлении (к центру элемента), как показано в следующей интерактивной демонстрации. Обратите внимание, что контур начинается с -40 пикселей:
Если вы посмотрите приведенную выше демонстрацию в Firefox, вы заметите, что сначала контур выглядит правильно, но когда ползунок отрегулирован, контур не отображается плавно и оказывается в неправильном положении. Прокрутка элемента из поля зрения, а затем обратно в поле зрения заставляет браузер перерисовывать контур в правильном положении. Похоже, это ошибка только Firefox.
Не является частью outlineстенографии
Подобно borderсобственности, outlineсвойство является обобщающим , что представляет три свойства: outline-color, outline-styleи outline-width.
Следовательно, outline-offsetсвойство не представлено ни в этом, ни в каком-либо другом сокращенном свойстве, поэтому его необходимо объявить отдельно от самого определенного контура.
Связанный
- контур
- граница
Дополнительная информация
- контур-смещение на W3C
Поддержка браузера
Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.
Рабочий стол
| Хром | Fire Fox | IE | Край | Сафари |
|---|---|---|---|---|
| 4 | 2 | 11 | 15 | 3.1 |
Мобильный / планшет
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 2.1 | 3.2 |
«Частичный» индикатор для IE означает, что IE не поддерживает outline-offset, но поддерживает outlineсокращение и три свойства, которые он представляет.
В дополнение к ошибке, упомянутой выше в разделе «Позиционирование контура», в Firefox есть ошибка, при которой контур отображается неправильно, если у элемента есть дочерний элемент, который выходит за пределы родительской границы (например, с использованием отрицательных полей или абсолютного позиционирования) . Следовательно, outline-offsetзначение будет относиться к расширенной границе, созданной переполненным дочерним элементом, а не к исходным границам родительского элемента. Чтобы лучше понять это, см. Этот CodePen, этот поток переполнения стека и этот отчет об ошибке (благодарность читателю Мэтту Вэйнсу за отправку этой ошибки).