outline-color
=============

CSS-свойство **`outline-color`** задаёт цвет обводки элемента.

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

Синтаксис
---------


```css
/\* Ключевые слова \*/
outline-color: invert;

/\* Значения типа <color> \*/
outline-color: #f92525;
outline-color: rgb(30, 222, 121);
outline-color: blue;

/\* Глобальные значения \*/
outline-color: inherit;
outline-color: initial;
outline-color: revert;
outline-color: revert-layer;
outline-color: unset;
```


Свойство `outline-color` может быть иметь одно из перечисленных ниже значений.

### Значения

`<color>`

Цвет обводки, определённый в формате типа `<color>`.

`invert`

Для лучшей видимости обводки, её цвет будет вычислен как противоположный цвету фона элемента. Стоит заметить, что не все браузеры могут поддерживать такую возможность, в подобном случае это значение будет восприниматься как недопустимое.

Описание
--------

Обводка — это линия вокруг элемента за пределами рамки (`border`). В отличие от рамки элемента, обводка находится вне границ элемента и может перекрывать другое содержимое. Напротив, рамка участвует в блочной модели, чтобы расположиться на странице, не перекрыв при этом ничего другого (если, конечно, явно не сделать этого).

При определении внешнего вида обводки зачастую удобнее всего воспользоваться сокращённым свойством `outline`.

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

При определении собственных стилей для состояния фокуса, как правило, предполагается изменение свойства `outline`. При корректировке цвета обводки нужно сохранить коэффициент контрастности между элементом и фоном на высоком уровне, чтобы люди с нарушениями зрения могли его заметить.

Коэффициент контрастности цвета определяется путём сравнения значений светлоты цвета текста и фона. Согласно руководству по обеспечению доступности веб-контента (WCAG)), коэффициент контрастности должен быть 4,5:1 для обычного текста, и 3:1 для крупного текста, например, заголовков. Под крупным текстом понимается размер от 18,66px с полужирным начертанием или более крупный, либо от 24px и крупнее.

* WebAIM: Color Contrast Checker
* MDN Understanding WCAG, Guideline 1.4 explanations (en-US)
* Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0
Формальное определение
----------------------

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

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

outline-color =   
  auto                      | (en-US)  
  [ (en-US) <color> | (en-US) <image-1D> ] (en-US)    
  
<image-1D> =   
  <stripes()>    
  
<stripes()> =   
  stripes( <color-stripe># (en-US) )    
  
<color-stripe> =   
  <color>                            && (en-US)  
  [ (en-US) <length-percentage> | (en-US) <flex> ] (en-US)? (en-US)    
  
<length-percentage> =   
  <length>      | (en-US)  
  <percentage>    
  
```

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

### Элемент с обводкой в виде сплошной линии синего цвета

#### HTML


```html
<p>У меня синяя обводка.</p>
```


#### CSS


```css
p {
  outline: 2px solid; /\* Толщина и стиль обводки \*/
  outline-color: #0000ff; /\* Синий цвет обводки \*/
  margin: 5px;
}
```


#### Результат

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

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # outline-color |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* `outline`
* `outline-color`
* `outline-style`
* `outline-width`
* Тип данных `<color>`
* Другие, относящиеся к цвету свойства: `color` (en-US), `background-color`, `border-color` (en-US), `text-decoration-color` (en-US), `text-emphasis-color` (en-US), `text-shadow`, `caret-color` (en-US) и `column-rule-color`
* Applying color to HTML elements using CSS