outline
Сокращённое свойтсов CSS outline
) устанавливает большинство свойств обводки в одном объявлении.
Интерактивный пример
Составные свойства
Это свойство предназначено для короткой записи следующих 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
удалит стандартную браузерную обводку, появляющуюся при фокусе на элемент. Интерактивный элемент должен иметь отдельную стилизацию при фокусировке на него. Если подобная стилизация, добавляемая браузерами по умолчанию, будет удалена, следует указать свою собственную.
Формальное определение
Начальное значение | как и у каждого из подсвойств этого свойства:
|
---|---|
Применяется к | все элементы |
Наследуется | нет |
Обработка значения | как и у каждого из подсвойств этого свойства:
|
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
<a href="#">У этой ссылки есть собственный стиль при фокусе.</a>
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