СSS Свойство outline-color
Определение и использование
Контур - это линия, которая рисуется вокруг элементов (вне границ), чтобы элемент "выделялся".
Свойство outline-color
определяет цвет контура.
Примечание: Всегда объявляйте свойство outline-style перед свойством outline-color
. Элемент должен иметь контур, прежде чем вы измените его цвет.
Значение по умолчанию: | invert |
---|---|
Унаследованный: | нет |
Анимируемый: | да, см. раздел отдельные свойства. Прочитать о animatable Попробовать |
Версия: | CSS2 |
JavaScript синтаксис: | object.style.outlineColor="#FF0000" Попробовать |
Советы и примечания
Контур - это линия вокруг элемента. Он отображается вокруг поля элемента. Однако он отличается от пограничного свойства.
Свойство outline не является частью размеров элемента, поэтому свойства width и height элемента не содержат ширину контура.
Поддержка браузеров
Числа в таблице указывают первая версия браузер, который полностью поддерживает свойство.
Свойство | |||||
---|---|---|---|---|---|
outline-color | 1.0 | 8.0 | 1.5 | 1.2 | 7.0 |
CSS Синтаксис
outline-color: invert|color|initial|inherit;
Значения свойств
Значение | Описание | Воспроизвести |
---|---|---|
invert | Выполняет инверсию цвета. Это гарантирует, что контур виден, независимо от цвета фона. Это показатель | Воспроизвести » |
color | Задает цвет контура. Смотреть CSS Значение цвета для получения полного списка возможных значений цвета. | Воспроизвести » |
initial | Устанавливает это свойство в значение индекса. Прочитать о initial | Воспроизвести » |
inherit | Наследует это свойство от родительского элемента. Прочитать о inherit |
Примеры
Пример
Установить цвет для контура с значением RGB:
div {outline-color: rgb(201, 76, 76);}
Попробуйте сами »
Пример
Установить цвет для контура с значением RGBA:
div {outline-color: rgba(201, 76, 76, 0.3);}
Попробуйте сами »
Пример
Установить цвет для контура с значением HSL:
div {outline-color: hsl(89, 43%, 51%);}
Попробуйте сами »
Пример
Установить цвет для контура с значением HSLA:
div {outline-color: hsla(89, 43%, 51%, 0.3);}
Попробуйте сами »
Связанные страницы
CSS Учебник: CSS Контур
CSS Справочник: Свойство outline
HTML DOM Справочник: Свойство outlineColor