css властивість border-image-outset
Властивість border-image-outset задає відстань на яку зображення може вийти за межі кордонів блоку.
За допомогою даної властивості можна встановити одночасно відстань відступу для верхнього, правого, нижнього і лівого кордону. Залежно від кількості значень, встановлюються різні елементи відступів:
- Якщо вказано єдине значення, то дана величина застосовується для відступів від всіх країв кордону.
- Якщо вказано два значення, то перша величина - відступ від верхнього і нижнього краю, а друга - для лівого і правго.
- Три значення, встановлюють, ширину відступу від верхнього, правого і лівого, а також нижнього кордонів.
- Чотири значення послідовно застосовуються для всіх відступів, починаючи з верхнього, за годинниковою стрілкою, - верхній, правий, нижній, лівий.
- Порада
-
Зверніть увагу на властивість
автор: Svitlanaborder-image(це скорочена властивість для установки всіхborder-image-властивостей). - Порада
-
Щоб зекономити час, рекомендується використовувати border-image для встановлення всіх властивостей для зображення межі одним правилом.
автор: Svitlana - Нотатка
-
Частини зображення, що виступають за межі, як результат значення
автор: Svitlanaborder-boxвластивостіbox-sizing, не збільшують розмір елементу, а також не можуть бити прокручені. Ці області також, не реагують на кліки миші, та ніяк не впливають на батьківський елемент при взаємодії з нею. - Нотатка
-
Використання від'ємних значень заборонено, і будь-яке від'ємне значення буде трактуватися як 0.
автор: Svitlana - Нотатка
-
Частини фонового зображення рамки що виступають за кордон не збільшують розмір блоку і відповідно можуть орізатися областю видимості батьківського елемента.
автор: Svitlana
Синтаксис
border-image-outset: length|number|initial|inherit;Властивість border-image-outset може отримувати 4 значень:
-
length -
Відстань на яке фонове зображення для кордону блоку виступає за ширину самого кордону.
автор: Svitlana -
number -
Кратне значення для відповідного значення властивості
автор: Svitlanaborder-width -
initial -
Встановлює властивість у значення без задання
автор: Svitlana -
inherit -
Вказує на спадковість властивості від свого батьківського елемента.
автор: Svitlana
| Значення без задання: | 0 |
|---|---|
| Наслідує: | Ні |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.borderImageOutset="10px" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 15 | 15 | 6 | 15 | 12 | 11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 15 | 6 |
Приклади
+ запропонувати свій приклад у пісочниці
Однакові рамки-зображення, але в другому блоці border-image-outset висуває рамку на 10 пікселів назовні за межі блока.
HTML
<div class="box">без outset</div>
<div class="box out">border-image-outset: 10px</div>CSS
.box {
margin: 16px;
padding: 12px;
border: 12px solid transparent;
border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg fill='%230172ad'%3E%3Cpath d='M15 0l15 15-15 15L0 15z'/%3E%3Cpath d='M45 0l15 15-15 15-15-15z'/%3E%3Cpath d='M75 0l15 15-15 15-15-15z'/%3E%3Cpath d='M15 30l15 15-15 15L0 45z'/%3E%3Cpath d='M75 30l15 15-15 15-15-15z'/%3E%3Cpath d='M15 60l15 15-15 15L0 75z'/%3E%3Cpath d='M45 60l15 15-15 15-15-15z'/%3E%3Cpath d='M75 60l15 15-15 15-15-15z'/%3E%3C/g%3E%3C/svg%3E");
border-image-slice: 30;
border-image-repeat: round;
}
.out {
border-image-outset: 10px;
}Динамічний приклад
Демонстрація роботи властивості
Приклад використання властивості
Коментарі
Коментарів ще немає — будьте першим!