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

Властивість border-image-slice використовується для ділення зображення заданого за допомогою border-image-source на дев’ять частин: 4 кути, 4 краї та середина.

Значення цієї властивості повідомляють браузеру, де "зрізати" зображення для створення частин кордону.

Центральна частина зображення не використовується безпосередньо межею, але може бути використана як фонове зображення, у випадку коли задане ключове слово fill, при чому не обов’язкова його позиція відносно інших заданих значень властивості.

border-image-slice використовується разом з такими властивостями як border-image-source, border-image-repeat, border-image-outset та border-image-width для стилізування меж елементів.

Властивість border-image-slice може приймати 1, 2, 3 або 4 параметра. Зверніть увагу на те, що одиниці вимірювання для зміщення не пишуть (наприклад, просто 20, а не 20px). Також можна задавати товщину в відсотках %.

Чотири значення визначають їх положення, але їхня кількість не обов’язкова:

правити

Порада

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

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

Порада

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

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

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

Синтаксис

border-image-slice: number|%|fill|initial|inherit;

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

number

Числа - це пікселі (для растрового зображення) або координати (для векторного). Одиниці виміру не вказуються.

автор: Svitlana

правити

%

Процентний вміст по відношенню до висоти або ширині зображення

автор: Svitlana

правити

fill

Вказує, що середня частина повинна відобразитися у вигляді тла елемента.

автор: Svitlana

правити

initial

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

автор: Svitlana

правити

inherit

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

автор: Svitlana

правити

Переглядачі

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

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

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

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

Приклади

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

<div class="box s30">slice: 30 — по межі ромба</div>
<div class="box s10">slice: 10 — ромби порізані</div>

.box {
    margin-bottom: 12px;
    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-repeat: round;
}

.s30 { border-image-slice: 30; }
.s10 { border-image-slice: 10; }