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). Також можна задавати товщину в
відсотках %.
Чотири значення визначають їх положення, але їхня кількість не обов’язкова:
| Число параметрів | Опис параметрів |
|---|---|
| 1 | Товщина для всіх сторін одночасно. |
| 2 | 1 2; - 1px для верхньої та нижньої частини, 2px для лівої і правої. |
| 3 | 1 2 3; - 1px для верху, 2px для лівої і правої, 3px для низу. |
| 4 | 1 2 3 4; - 1px для верху, 2px для правої, 3px для низу, 4px для лівої. |
| Порада: | Щоб зекономити час, рекомендується використовувати |
| Порада: | Зверніть увагу, |
Синтаксис
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;
}