css властивість outline
Властивість outline задає зовнішній контур навколо елементу. Зовнішній контур не впливає на розміри елемента, на відмінну від звичайних кордонів (властивість border).
Ця властивість універсальна і дозволяє одночасно задавати наступні значення:
outline-coloroutline-styleoutline-width
Значення можуть розташовуватися в будь-якій послідовності, також непотрібні значення можуть бути не вказані (наприклад: outline:solid #ff0000;), в такому випадку не вказане значення браузер встановить без задання.
Контури відрізняються від кордонів декількома якостіми:
- Контур, намальований навколо елемента, за межами його кордонів.
- Контур не займає простір.
- Контур може бути округлим.
- Не можна задати параметри на окремих сторонах контуру.
На відміну від кордону елемента (наприклад, встановлено за допомогою кордону або пов'язаних з ним властивостей), контур елемента не займає зайвого місця, і може бути не прямокутним.
Контур завжди знаходиться над блоком, і це не впливає на положення чи розмір елементу або інших елементів.
Синтаксис
outline: outline-color outline-style outline-width|initial|inherit;Властивість outline може отримувати 5 значень:
| Значення без задання: | medium invert color |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.outline="#0000FF dotted 5px" |
Переглядачі
| Переглядач | ||||||
|---|---|---|---|---|---|---|
| outline | 1.0 |
8.0 |
1.5 |
1.2 |
7.0 |
12.0 |
| Переглядач | |||
|---|---|---|---|
| outline | 1.0 |
1.0 |
3.1 |
Мобільних переглядачів ще не додано.
Приклади
Різні значення у дії
Приклад використання
Встановлення контуру навколо елемента
p {
outline: #00FF00 dotted thick;
}