Свойство CSS outline-color
Свойство CSS outline-color задаёт цвет обводки элемента. Значения свойства и примеры использования.
Свойство CSS outline-color задаёт цвет обводки элемента — линии, которая рисуется сразу за внешним краем рамки.
Обводка похожа на border, но имеет два важных отличия:
- Она не занимает места. width и height элемента не включают обводку, поэтому её добавление или изменение никогда не сдвигает окружающий макет (в отличие от рамки, которая является частью блочной модели).
- Нельзя задать отдельные стороны. Обводка оборачивает элемент целиком; нельзя задать разный цвет только для верхней или левой стороны, как это можно сделать с помощью border-color.
Поскольку обводки располагаются за пределами блока и не перестраивают страницу, они являются стандартным способом показа фокуса клавиатуры. Когда пользователь переключается по ссылкам, кнопкам и полям форм клавишей Tab, браузер рисует обводку фокуса, чтобы было видно, где он находится. Это делает outline-color прежде всего инструментом доступности, а уже потом — декоративным — будьте осторожны, убирая или скрывая обводки фокуса.
Зачем использовать outline-color
outline-color применяется главным образом для:
- Оформления состояний фокуса — чтобы задать
:focusили:focus-visibleконтрастный, фирменный цвет обводки вместо браузерного по умолчанию. - Выделения элемента без изменения его размера и без смещения соседних элементов.
- Отладки макета — временная яркая обводка показывает точные границы элемента без влияния на блочную модель.
outline-color сам по себе не имеет видимого эффекта. Обводка отображается только тогда, когда у неё задан стиль, поэтому используйте его вместе с сокращённым свойством outline или свойством outline-style (значение стиля по умолчанию — none).
Допустимые значения цвета
Цвет обводки можно задать любым стандартным CSS-цветом: именем цвета (red), шестнадцатеричным кодом (#1c87c9) или функциональными обозначениями rgb(), rgba(), hsl() и hsla(). Также удобно ключевое слово currentColor — оно делает обводку того же цвета, что и текст элемента color. Полный список форматов цветов см. в разделе HTML colors.
| Начальное значение | invert |
|---|---|
| Применяется к | Всем элементам. |
| Наследуется | Нет. |
| Анимируется | Да. Цвет поддаётся анимации. |
| Версия | CSS2 |
| DOM Syntax | object.style.outlineColor = "#8ebf42"; |
Синтаксис
CSS outline-color syntax
outline-color: invert | color | initial | inherit;Пример использования свойства outline-color:
CSS outline-color code example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 3px solid #ccc;
outline-style: double;
outline-color: invert;
}
</style>
</head>
<body>
<h2>Outline-color property example</h2>
<p>Invert default value is applied.</p>
</body>
</html>Результат
Пример использования outline-color с шестнадцатеричными, RGB, RGBA, HSL, HSLA цветами:
CSS outline-color all values example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.p1 {
outline-style: solid;
outline-color: #1c87c9;
}
.p2 {
outline-style: solid;
outline-color: hsl(65, 100%, 50%);
}
.p3 {
outline-style: solid;
outline-color: hsla(84, 49%, 50%, 1);
}
.p4 {
outline-style: solid;
outline-color: rgb( 224, 0, 0);
}
.p5 {
outline-style: solid;
outline-color: rgba(204, 204, 204, 1);
}
</style>
</head>
<body>
<h2>Outline-color property example</h2>
<p class="p1">This is a paragraph with hexadecimal blue outline.</p>
<p class="p2">This is a paragraph with hsl yellow outline.</p>
<p class="p3">This is a paragraph with hsla green outline.</p>
<p class="p4">This is a paragraph with rgb red outline.</p>
<p class="p5">This is a paragraph with rgba grey outline.</p>
</body>
</html>Каждый абзац сохраняет одинаковый макет — меняется только цвет обводки — потому что обводка располагается за пределами блока и не добавляет ни ширины, ни высоты.
Пример оформления обводки фокуса:
Наиболее распространённое практическое применение outline-color — сделать фокус клавиатуры заметным и соответствующим фирменному стилю. Здесь ссылка получает толстую синюю обводку фокуса вместо браузерной по умолчанию:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a:focus-visible {
outline-style: solid;
outline-width: 3px;
outline-color: #1c87c9;
outline-offset: 2px;
}
</style>
</head>
<body>
<h2>Focus outline example</h2>
<p>Press <kbd>Tab</kbd> to move focus to the link below:</p>
<a href="#">Focus me with the keyboard</a>
</body>
</html>Свойство outline-offset отодвигает обводку на несколько пикселей от элемента, чтобы она не касалась текста. Используйте :focus-visible вместо :focus, чтобы обводка отображалась для пользователей клавиатуры, но не при кликах мышью.
Избегайте outline: none или outline-color: transparent на фокусируемых элементах, если только вы не заменяете индикатор фокуса чем-то столь же заметным. Его удаление делает страницу непригодной для использования только с клавиатурой.
Значения
| Значение | Описание | Попробовать |
|---|---|---|
| invert | Инвертирует любой цвет, применённый к фону. Это значение гарантирует видимость обводки независимо от background color. Является значением этого свойства по умолчанию. | Попробовать » |
| color | Задаёт цвет обводки. Можно использовать имена цветов, шестнадцатеричные коды, rgb(), rgba(), hsl(), hsla() или ключевое слово currentColor. | Попробовать » |
| initial | Устанавливает свойство в значение по умолчанию. | Попробовать » |
| inherit | Наследует свойство от родительского элемента. |
Связанные свойства
outline-color — одно из трёх подсвойств сокращённого свойства outline:
- outline-style — задаёт стиль линии (
solid,dashed,double, …). Требуется для отображения обводки. - outline-width — задаёт толщину линии.
- outline-offset — задаёт отступ между обводкой и краем рамки.
Запись outline: 3px solid #1c87c9; является сокращением для одновременного задания ширины, стиля и цвета.