outline
=======

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

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

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

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

* `outline-color`
* `outline-style`
* `outline-width`
Синтаксис
---------


```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` может быть задано одним, двум или тремя перечисленными ниже значений. Порядок следования значений не имеет значения. Как и в случае с другими сокращёнными свойствами, вместо пропущенных значений будет использоваться первоначальное значение.

> 
> **Note:** если стиль обводки не задан, он будет невидим для большого количества элементов. Всё потому, что обводка по умолчанию не стилизован (т.е. для его свойств задано значение `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` удалит стандартную браузерную обводку, появляющуюся при фокусе на элемент. Интерактивный элемент должен иметь отдельную стилизацию при фокусировке на него. Если подобная стилизация, добавляемая браузерами по умолчанию, будет удалена, следует указать свою собственную.

* How to Design Useful and Usable Focus Indicators
* WCAG 2.1: Understanding Success Criterion 2.4.7: Focus Visible
Формальное определение
----------------------

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

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

outline =   
  <'outline-color'>  || (en-US)  
  <'outline-style'>  || (en-US)  
  <'outline-width'>    
  
```

Примеры
-------

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

#### 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 with JavaScript enabled. Enable JavaScript to view data.

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

* `outline-color`
* `outline-style`
* `outline-width`