Свойство контура CSS
Пример
Установите контур вокруг элемента <h2> и элемента <div>:
h2 {
outline: 5px dotted green;
}
div.a {
outline: 2px dashed blue;
}
Определение и использование
Контур — это линия, которая рисуется вокруг элементов за пределами границ, чтобы элемент «выделялся».
Свойство outline
является сокращенным свойством для:
- ширина контура
- стиль контура (обязательно)
- цвет контура
Если параметр layout-color не указан, применяемый цвет будет цветом текста.
Примечание. Контуры отличаются от границ ! В отличие от границы, контур рисуется за пределами границы элемента и может перекрывать другое содержимое. Кроме того, контур НЕ является частью размеров элемента; общая ширина и высота элемента не зависит от ширины контура.
Значение по умолчанию: | средний инвертированный цвет |
---|---|
Унаследовано: | нет |
Анимация: | да, см. отдельные свойства . Читать об анимации |
Версия: | CSS2 |
Синтаксис JavaScript: | объект .style.outline="#0000FF с точкой 5px" |
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает это свойство.
Property | |||||
---|---|---|---|---|---|
outline | 1.0 | 8.0 | 1.5 | 1.2 | 7.0 |
Синтаксис CSS
outline: outline-width outline-style outline-color|initial|inherit;
Значения свойств
Value | Description |
---|---|
outline-width | Specifies the width of outline |
outline-style | Specifies the style of the outline |
outline-color | Specifies the color of the outline |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Связанные страницы
Учебное пособие по CSS: Структура CSS
Справочник по HTML DOM: свойство структуры