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


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

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

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

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

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

Нотатка:

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

Нотатка:

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

Порада:

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

Нотатка:

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

Синтаксис

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

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

length

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

number

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

initial

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

inherit

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

Значення без задання: 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; 


}

Додаткові посилання