outline
Поддержка браузерами
| 12.0+ | 8.0+ | 1.5+ | 1.0+ | 7.0+ | 1.2+ |
Описание
CSS свойство outline позволяет в одном объявлении установить ширину, стиль и цвет внешней границы элемента. Внешняя граница выглядит как ещё одна рамка, которая окружает элемент со всех сторон.
Значения свойства разделяются пробелом и могут следовать в любом порядке, браузер сам определит, какое из них соответствует нужному свойству. Все три значения указывать не обязательно, любое из них можно опустить, в этом случае вместо пропущенного значения будет использовано значение, которое установлено для свойства по умолчанию, например, если не указана ширина, то будет использовано значение по умолчанию свойства outline-width.
Внешняя граница устанавливается с внешней стороны рамки (если она есть) и не влияет на общий размер элемента.
| Значение по умолчанию: | invert none medium |
|---|---|
| Применяется: | ко всем элементам |
| Анимируется: | да, смотрите каждое свойство, входящее в состав краткого метода, отдельно |
| Наследуется: | нет |
| Версия: | CSS2 |
| Синтаксис JavaScript: | object.style.outline="#0000FF dotted thin" |
Синтаксис
outline: outline-color outline-style outline-width|inherit;
Значения свойства
| Значение | Описание |
|---|---|
| outline-color | Задает цвет для внешней границы. |
| outline-style | Задает стиль для внешней границы. |
| outline-width | Задает ширину для внешней границы. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Пример
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Пример</title>
<style>
p {
border: 2px solid red;
outline: green dotted thick;
}
</style>
</head>
<body>
<p>C помощью свойства outline мы сделали вторую рамку(внешнюю).</p>
</body>
</html>
Результат данного примера в окне браузера:
