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


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

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

Це може бути URL-адреса, URI-дані, градієнт CSS або вбудований SVG. border-image-source використовується разом з такими властивостями як border-image-slice, border-image-repeat, border-image-outset та border-image-width для стилізування меж елементів.

Порада:

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

Порада:

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

Синтаксис

border-image-source: none|image|initial|inherit;

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

none

Не використовувати зображення.

image

Шлях до зображення

initial

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

inherit

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

Значення без задання: none
Наслідує: Ні
Анімується: Ні
JavaScript синтаксис: object.style.borderImageSource="url(border.png)"

Переглядачі

Переглядач
border-image-source

15.0

11.0

15.0

6.0

15.0


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


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

Приклади


Динамічний приклад

Демонстрація роботи властивості

Демонстрація роботи властивості

Приклад використання властивості

Вказує зображення в якості границі

#borderimg { 


  border-image-source: url(border.png); 


}

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