outline-style
Устанавливает стиль внешней границы элемента. В отличие от линии, задаваемой через border, линия через outline отображается вокруг элемента, не влияя на ширину блока или его положение.
Краткая информация
Значение по умолчанию | none |
---|---|
Наследуется | Нет |
Применяется | Ко всем элементам |
Анимируется | Нет |
Синтаксис
outline-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset
Значения
- none
- Граница не отображается. Это значение перекрывает свойство outline-width, если оно присутствует.
- dotted
- Линия состоящая из набора точек.
- dashed
- Пунктирная линия, состоящая из серии коротких отрезков.
- solid
- Сплошная линия.
- double
- Двойная линия.
- groove
- Создаёт эффект вдавленной рамки.
- ridge
- Создаёт эффект рельефной границы.
- inset
- Псевдотрёхмерная рамка, при которой правая и нижняя граница осветляется, а левая и верхняя линии затемняются.
- outset
- Псевдотрёхмерная рамка, при которой левая и верхняя граница имеют более светлый оттенок, чем заданный цвет, а правая и нижняя линии затемняются.
Вид указанных стилей представлен на рис. 1.
Рис. 1. Вид границы с разным значением стилей
Песочница
Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.
div { padding: 10px; outline: 5px #e4efc7; outline-style: none; }
Пример
Код примера скопирован в буфер
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>outline-style</title> </head> <body> <p><a href="http://ya.ru">Яндекс</a> <a href="http://google.ru">Google</a></p> <p class="noborder"><a href="http://ya.ru">Яндекс</a> <a href="http://google.ru">Google</a></p> </body> </html>
В данном примере для браузера убирается пунктирная граница вокруг ссылок, возникающая при их активации. В первом абзаце рамка ещё будет отображаться, а во втором абзаце она скрывается с помощью значения none свойства outline-style.
Объектная модель
Объект.style.outlineStyle
Спецификация
Спецификация | Статус |
---|---|
CSS Basic User Interface Module Level 4 | Рабочий проект |
CSS Basic User Interface Module Level 3 | Рекомендация |
CSS Level 2 (Revision 1) | Рекомендация |
Браузеры
8 | 12 | 1 | 7 | 1.2 | 1.5 |
1 | 1.5 | 7 | 1.2 |