html.okpython.net
Основы создания сайтов
CSS :: Свойство outline-color
css-свойство outline-color (от англ. outline color – цвет контура) используется для установки цвета контура элемента.
Следует помнить, что в отличие от границ элемента, контур не влияет на размеры и положение самого элемента, а также окружающих элементов, отображаясь поверх них.
Характеристики
- Значение по умолчанию: invert.
- Применяется: ко всем элементам.
- Наследуется: нет.
- Анимируется: да.
- JavaScript: object.style.outlineColor="value".
Синтаксис
outline-color: invert | <цвет>
Значения
- invert – цвет контура задается браузером автоматически с максимальным контрастом по отношению к окружающему фону. При этом браузер может игнорировать данное значение, использовав при необходимости текущее значение свойства color для данного элемента.
- цвет – любое допустимое в CSS значение цвета.
Ссылки
Официальный сайт W3C: https://drafts.csswg.org/css-ui-3/#outline-color
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/outline-color
Примеры
HTML
Результат
htmlCodes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> <style> p{ width: 300px; height: 150px; margin: 5em; padding: 1em; border: 5px solid violet; outline: groove 8px; outline-offset: 1em; } .p_1{ outline-color: #00FF00; } .p_2{ outline-color: orange; } .p_3{ outline-color: invert; } </style> </head> <body> <p class="p_1"> outline-color: #00FF00; </p> <p class="p_2"> outline-color: orange; </p> <p class="p_3"> outline-color: invert; </p> </body> </html>
Пример №1