css властивість border-image-outset
Властивість border-image-outset задає відстань на яку зображення може вийти за межі кордонів блоку.
За допомогою даної властивості можна встановити одночасно відстань відступу для верхнього, правого, нижнього і лівого кордону. Залежно від кількості значень, встановлюються різні елементи відступів:
- Якщо вказано єдине значення, то дана величина застосовується для відступів від всіх країв кордону.
- Якщо вказано два значення, то перша величина - відступ від верхнього і нижнього краю, а друга - для лівого і правго.
- Три значення, встановлюють, ширину відступу від верхнього, правого і лівого, а також нижнього кордонів.
- Чотири значення послідовно застосовуються для всіх відступів, починаючи з верхнього, за годинниковою стрілкою, - верхній, правий, нижній, лівий.
| Порада: | Зверніть увагу на властивість |
| Нотатка: | Використання від'ємних значень заборонено, і будь-яке від'ємне значення буде трактуватися як 0. |
| Нотатка: | Частини фонового зображення рамки що виступають за кордон не збільшують розмір блоку і відповідно можуть орізатися областю видимості батьківського елемента. |
| Порада: | Щоб зекономити час, рекомендується використовувати border-image для встановлення всіх властивостей для зображення межі одним правилом. |
| Нотатка: | Частини зображення, що виступають за межі, як результат значення |
Синтаксис
border-image-outset: length|number|initial|inherit;Властивість border-image-outset може отримувати 4 значення:
| Значення без задання: | 0 |
|---|---|
| Наслідує: | Ні |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.borderImageOutset="10px" |
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
| border-image-outset | 15.0 |
11.0 |
15.0 |
6.0 |
15.0 |
Мобільних переглядачів ще не додано.
Мобільних переглядачів ще не додано.
Приклади
Динамічний приклад
Демонстрація роботи властивості
Приклад використання властивості
Задає вихід зображення за межі границь блоку
#borderimg {
border-image-source: url(border.png);
border-image-outset: 10px;
}