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

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

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

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

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

Центральна частина зображення не використовується безпосередньо межею, але може бути використана як фонове зображення, у випадку коли задане ключове слово 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). Також можна задавати товщину в відсотках %.

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

Число параметрів Опис параметрів
1 Товщина для всіх сторін одночасно.
2 1 2; - 1px для верхньої та нижньої частини, 2px для лівої і правої.
3 1 2 3; - 1px для верху, 2px для лівої і правої, 3px для низу.
4 1 2 3 4; - 1px для верху, 2px для правої, 3px для низу, 4px для лівої.
Порада:

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

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

Синтаксис

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

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

number

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

%

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

fill

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

initial

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

inherit

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

Значення без задання: 100%
Наслідує: Ні
Анімується: Ні
JavaScript синтаксис: object.style.borderImageSlice="30%"

Переглядачі

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

15.0

11.0

15.0

6.0

15.0

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

Приклади


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

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

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

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

Вказує як поділити зображення

#borderimg { 


  border-image-slice: 30; 


}

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

Зв'язок