css властивість border-image-outset

Властивість border-image-outset задає відстань на яку зображення може вийти за межі кордонів блоку.

За допомогою даної властивості можна встановити одночасно відстань відступу для верхнього, правого, нижнього і лівого кордону. Залежно від кількості значень, встановлюються різні елементи відступів:

• Якщо вказано єдине значення, то дана величина застосовується для відступів від всіх країв кордону.
• Якщо вказано два значення, то перша величина - відступ від верхнього і нижнього краю, а друга - для лівого і правго.
• Три значення, встановлюють, ширину відступу від верхнього, правого і лівого, а також нижнього кордонів.
• Чотири значення послідовно застосовуються для всіх відступів, починаючи з верхнього, за годинниковою стрілкою, - верхній, правий, нижній, лівий.

правити

Порада

Зверніть увагу на властивість border-image (це скорочена властивість для установки всіх border-image- властивостей).

автор: Svitlana правити

Порада

Щоб зекономити час, рекомендується використовувати border-image для встановлення всіх властивостей для зображення межі одним правилом.

автор: Svitlana правити

Нотатка

Частини зображення, що виступають за межі, як результат значення border-box властивості box-sizing, не збільшують розмір елементу, а також не можуть бити прокручені. Ці області також, не реагують на кліки миші, та ніяк не впливають на батьківський елемент при взаємодії з нею.

автор: Svitlana правити

Нотатка

Використання від'ємних значень заборонено, і будь-яке від'ємне значення буде трактуватися як 0.

автор: Svitlana правити

Нотатка

Частини фонового зображення рамки що виступають за кордон не збільшують розмір блоку і відповідно можуть орізатися областю видимості батьківського елемента.

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

border-image-outset: length|number|initial|inherit;

Властивість border-image-outset може отримувати 4 значень:

length

Відстань на яке фонове зображення для кордону блоку виступає за ширину самого кордону.

автор: Svitlana

правити

number

Кратне значення для відповідного значення властивості border-width

автор: Svitlana

правити

initial

Встановлює властивість у значення без задання

автор: Svitlana

правити

inherit

Вказує на спадковість властивості від свого батьківського елемента.

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
border-image-outset	15.0	15.0	6.0	15.0	11.0

Мобільних переглядачів ще не додано.

Приклади

+ запропонувати свій приклад у пісочниці

<div class="box">без outset</div>
<div class="box out">border-image-outset: 10px</div>

.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;
}