outline

Baseline 2023

Newly available

Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Сокращённое свойтсов CSS outline ) устанавливает большинство свойств обводки в одном объявлении.

Интерактивный пример

Составные свойства

Это свойство предназначено для короткой записи следующих CSS-свойств:

Синтаксис

css
/* style */
outline: solid;

/* color | style */
outline: #f66 dashed;

/* style | width */
outline: inset thick;

/* color | style | width */
outline: green solid 3px;

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

Свойство outline может быть задано одним, двум или тремя перечисленными ниже значений. Порядок следования значений не имеет значения. Как и в случае с другими сокращёнными свойствами, вместо пропущенных значений будет использоваться первоначальное значение.

Примечание: Если стиль обводки не задан, он будет невидим для большого количества элементов. Всё потому, что обводка по умолчанию не стилизован (т.е. для его свойств задано значение none). Самое заветное исключение составляют элементы input, для которых браузеры определяют стандартный стиль.

Значения

<'outline-color'>

Задаёт цвет обводки. По умолчанию используется invert, если браузер поддерживает это ключевое слово, в противном случае — currentcolor. Смотрите outline-color для получения дополнительной информации.

<'outline-style'>

Устанавливает стиль обводки. По умолчанию none (если стиль обводки не определён). Смотрите outline-style для получения дополнительной информации.

<'outline-width'>

Устанавливает толщину обводки. По умолчанию medium (если толщина обводки не указана). Смотрите outline-width для получения дополнительной информации.

Описание

Обводка — это линия за пределами рамки элемента. В отличие от других частей блока, обводки не занимают места, поэтому они никак не влияют на раскладку.

Есть несколько свойств, определяющих внешний вид обводки. С помощью свойства outline можно задать стиль, цвет и толщину, outline-offset — расстояние от рамки элемента, border-radius — закруглённые углы.

Обводка не всегда представляет собой прямоугольник: при работе с многострочным текстом некоторые браузеры отображают отдельную обводку для каждой строки, в то время как другие ограничиваются только одной обводкой для всего текста.

Проблемы, связанные с доступностью

Установка значения 0 или none для outline удалит стандартную браузерную обводку, появляющуюся при фокусе на элемент. Интерактивный элемент должен иметь отдельную стилизацию при фокусировке на него. Если подобная стилизация, добавляемая браузерами по умолчанию, будет удалена, следует указать свою собственную.

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

Начальное значениекак и у каждого из подсвойств этого свойства:
Применяется квсе элементы
Наследуетсянет
Обработка значениякак и у каждого из подсвойств этого свойства:
  • outline-width: абсолютная длина; если указано ключевое слово none, вычисленное значение - 0
  • outline-style: как указано
  • outline-color: Для ключевого слова auto, значение - currentcolor. Для значения цвета, если значение имеет прозрачность, соответственно, значение будет через rgba(). Если это не так, это будет rgb(). Ключевое слово transparent отображается, как rgba(0,0,0,0).
Animation typeкак и у каждого из подсвойств этого свойства:

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

outline = 
  <'outline-width'>  ||
  <'outline-style'>  ||
  <'outline-color'>  

<outline-width> = 
  <line-width>  

<outline-style> = 
  auto                  |
  <outline-line-style>  

<outline-color> = 
  auto        |
  <color>     |
  <image-1D>  

<line-width> = 
  <length [0,∞]>  |
  thin            |
  medium          |
  thick           

<image-1D> = 
  <stripes()>  

<stripes()> = 
  stripes( <color-stripe># )  

<color-stripe> = 
  <color>                            &&
  [ <length-percentage> | <flex> ]?  

<length-percentage> = 
  <length>      |
  <percentage>

Примеры

Использование обводки для стилизации элемента в фокусе

HTML

html
<a href="#">У этой ссылки есть собственный стиль при фокусе.</a>

CSS

css
a {
  border: 1px solid;
  border-radius: 3px;
  display: inline-block;
  margin: 10px;
  padding: 5px;
}

a:focus {
  outline: 4px dotted #e73;
  outline-offset: 4px;
  background: #ffa;
}

Результат

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

Specification
CSS Basic User Interface Module Level 4
# outline

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

BCD tables only load in the browser

Смотрите также