Свойство outline-color определяет цвет линии.
Свойство outline-color не работает, если применяется отдельно. Оно должно быть использовано вместе со свойством outline или outline-style.
Можно установить цветовые коды hexadecimal, RGB, RGBA, HSL, HSLA или названия цветов как значение для свойства outline-color. Смотрите цветовые значения в разделе цвета HTML.
Значение по умолчанию | invert |
Применяется | Ко всем элементам. |
Наследуется | Нет |
Анимируемое | Да. Цвет анимируем.. |
Версия | CSS2 |
DOM синтаксис | object.style.outlineColor = "#8ebf42"; |
Синтаксис
outline-color: invert | color | initial | inherit;
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
p {
border: 3px solid #ccc;
outline-style: double;
outline-color: invert;
}
</style>
</head>
<body>
<h2>Пример свойства outline-color</h2>
<p>Применено значение по умолчанию invert.</p>
</body>
</html>
Пример, где установлены цветовые коды hexadecimal, RGB, RGBA, HSL, HSLA:
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</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</h2>
<p class="p1">Параграф, где установлено значение hexadecimal blue</p>
<p class="p2">Параграф, где установлено значение hsl yellow.</p>
<p class="p3">Параграф, где установлено значение hsla green.</p>
<p class="p4">Параграф, где установлено значение rgb red.</p>
<p class="p5">Параграф, где установлено значение rgba grey.</p>
</body>
</html>
Значения
Значение | Описание |
---|---|
invert | Инвертирует цвет, примененный для фона. Это значение обеспечивает видимость линии, независимо от фонового цвета. Значение по умолчанию. |
color | Устанавливает цвет линии. Могут быть применены названия цветов, цветовые коды hexadecimal, rgb(), rgba(), hsl(), hsla(). |
initial | Устанавливает свойство в значение по умолчанию. |
inherit | Значение элемента наследуется от родительского элемента. |
Поддержка браузера
1.0+ | 12.0+ | 1.5+ | 1.2+ | 7.0+ |
Практикуйте свои знания
Какие значения можно использовать для свойства 'outline-color' в CSS?
Правильный!
Неправильно!