css властивість 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 для встановлення всіх властивостей для зображення межі одним правилом.

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

Порада

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

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

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

Синтаксис

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

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

none

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

автор: Svitlana

правити

image

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

автор: Svitlana

правити

initial

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

автор: Svitlana

правити

inherit

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

автор: Svitlana

правити

Переглядачі

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

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

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

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

Приклади

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

<div class="box">Джерело рамки — svg із ромбами.</div>

.box {
    padding: 16px;
    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;
}