outline-color

Baseline Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с апреля 2017 года.

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

Попробовать

Синтаксис

/* <color> values */
outline-color: #f92525;
outline-color: rgb(30 222 121);
outline-color: blue;

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

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

Значения

<color>: Цвет обводки, заданный как <color>.

В спецификации также указано дополнительное значение auto, которое в настоящее время не поддерживается ни в одном браузере. При реализации auto будет вычислено как currentcolor, если outline-style установлено в значение auto, в противном случае оно будет вычислено как цвет акцента.

Описание

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

Чаще всего для определения внешнего вида обводки удобнее использовать сокращённое свойство outline.

Доступность

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

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

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

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

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

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

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

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

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

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

Примеры

Установление твёрдой синей обводки

HTML

<p>My outline is blue, as you can see.</p>

CSS

p {
  outline: 2px solid; /* Set the outline width and style */
  outline-color: #0000ff; /* Make the outline blue */
  margin: 5px;
}

Результат

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

Спецификация
CSS Basic User Interface Module Level 4 # outline-color

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`outline-color`	1	12	1.51–3.6	7	1.2	18	4	14	1	1.0	37

См. также

outline
outline-width
outline-style
Тип данных <color>
Другие свойства, связанные с цветом: color, background-color, border-color, text-decoration-color, text-emphasis-color, text-shadow, caret-color и column-rule-color

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/outline-color