css.in.ua
Підтримати

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; 


}

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

Зв'язок