Властивість CSS "outline" - огляд, синтаксис та приклади використання
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 8.0+ | 1.0+ | 7.0+ | 2.0+ | 1.5+ | 1.0+ | 1.0+ |
Коротка інформація
| Значення за замовчуванням | Немає |
|---|---|
| Наслідується | Ні |
| Застосовується | До всіх елементів |
| Посилання на специфікацію | http://www.w3.org/TR/CSS21/ui.html#propdef-outline |
Версії CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Опис
Універсальна властивість, що встановлює колір, стиль та товщину зовнішньої межі на всіх чотирьох сторонах елемента. На відміну від лінії, заданої через border, властивість outline не впливає на положення блоку та його ширину. Також неможливо задати параметри лінії на окремих сторонах елемента, outline застосовується одразу до всіх чотирьох сторін.
Синтаксис
outline: outline-color || outline-style || outline-width | inherit
Значення
- outline-color
- Встановлює колір лінії у будь-якому припустимому форматі для CSS.
- outline-style
- Стиль лінії.
- outline-width
- Товщина межі.
- inherit
- Наслідує значення батька.
Приклад
HTML5CSS2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>outline</title>
<style>
.photo img {
padding: 20px; /* Поля вокруг зображення */
margin-right: 10px; /* Відступ справа */
margin-bottom: 10px; /* Відступ знизу */
outline: 1px solid #666; /* Параметри рамки */
background: #f0f0f0; /* Колір фону */
float: left; /* Обтікання по правому краю */
}
</style>
</head>
<body>
<div class="photo">
<img src="images/girl.jpg" alt="Дівчинка з муфтою">
<img src="images/owl.jpg" alt="Сова">
<img src="images/boy.jpg" alt="Евенкійський хлопчик">
</div>
</body>
</html>Результат цього прикладу показано на рис. 1.
Об'єктна модель
[window.]document.getElementById("elementID").style.outline