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 для лівої. |
- Порада
-
Щоб зекономити час, рекомендується використовувати
автор: Svitlanaborder-imageдля встановлення всіх властивостей для зображення межі одним правилом. - Порада
-
Зверніть увагу,
автор: Svitlanaborder-imageвикористовується замістьborder-style, який буде показаний тільки у випадку, якщо сталася помилка при завантаженні зображення, або дляborder-imageвстановлене значення none.
Синтаксис
border-image-slice: number|%|fill|initial|inherit;Властивість border-image-slice може отримувати 5 значень:
-
number -
Числа - це пікселі (для растрового зображення) або координати (для векторного). Одиниці виміру не вказуються.
автор: Svitlana -
% -
Процентний вміст по відношенню до висоти або ширині зображення
автор: Svitlana -
fill -
Вказує, що середня частина повинна відобразитися у вигляді тла елемента.
автор: Svitlana -
initial -
Встановлює властивість у значення без задання
автор: Svitlana -
inherit -
Вказує на спадковість властивостей від свого батьківського елемента
автор: Svitlana
| Значення без задання: | 100% |
|---|---|
| Наслідує: | Ні |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.borderImageSlice="30%" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 15 | 15 | 6 | 15 | 12 | 11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 15 | 6 |
Приклади
+ запропонувати свій приклад у пісочниці
Зображення рамки поділене на клітинки по 30 пікселів: slice: 30 ріже рівно по межах ромбів, а slice: 10 — упоперек них, і в рамку потрапляють шматки.
HTML
<div class="box s30">slice: 30 — по межі ромба</div>
<div class="box s10">slice: 10 — ромби порізані</div>CSS
.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; }Динамічний приклад
Демонстрація роботи властивості
Демонстрація роботи властивості
Приклад використання властивості
Коментарі
Коментарів ще немає — будьте першим!