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 для лівої. |
Загальний опис
автор: NagarD
- Порада
-
Щоб зекономити час, рекомендується використовувати
автор: 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; }Одна картинка 90×90 (червоні кути, сині сторони, жовта середина) у чотирьох рамках. Правильний зріз — 30; fill лишає середину; зріз 10 ріже не по кутах; без border-width не видно нічого.
HTML
<div class="row">
<div class="box a">slice: 30</div>
<div class="box b">slice: 30 fill</div>
<div class="box c">slice: 10</div>
<div class="box d">border-width: 0</div>
</div>CSS
body {
font-family: sans-serif;
font-size: 13px;
padding: 12px;
}
.row {
display: flex;
gap: 18px;
flex-wrap: wrap;
}
.box {
width: 110px;
min-height: 50px;
padding: 8px;
text-align: center;
border: 30px solid transparent;
border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Crect width='90' height='90' fill='%230172ad'/%3E%3Crect x='0' y='0' width='30' height='30' fill='%23c1121f'/%3E%3Crect x='60' y='0' width='30' height='30' fill='%23c1121f'/%3E%3Crect x='0' y='60' width='30' height='30' fill='%23c1121f'/%3E%3Crect x='60' y='60' width='30' height='30' fill='%23c1121f'/%3E%3Crect x='30' y='30' width='30' height='30' fill='%23ffd166'/%3E%3C/svg%3E");
}
.a {
border-image-slice: 30;
}
.b {
border-image-slice: 30 fill;
}
.c {
border-image-slice: 10;
}
.d {
border-width: 0;
border-image-slice: 30;
}HTML
<div class="box">
<p>У цьому прикладі, Ви можете змінювати значення для властивості <strong>border-image-slice</strong>.</p>
<p>Вона встановлює, де "зрізати" зображення для створення частин кордону.</p>
<strong>border-image-slice: </strong>
<input type="number" class="input" id="num1" value="24">
<input type="number" class="input" id="num2" value="24">
<input type="number" class="input" id="num3" value="24">
<input type="number" class="input" id="num4" value="24">
<strong>;</strong>
</div>CSS
* {
box-sizing: border-box;
}
body {
font-family: monospace;
font-size: 16px;
line-height: 1.45;
height: 100vh;
padding: 16px;
}
.box {
background-color: #f7f7f7;
padding: 16px;
border: 32px solid #444;
border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Crect width='96' height='96' fill='%23e9c46a'/%3E%3Crect x='32' y='32' width='32' height='32' fill='%232a9d8f'/%3E%3Crect width='32' height='32' fill='%23e76f51'/%3E%3Crect x='64' width='32' height='32' fill='%23e76f51'/%3E%3Crect y='64' width='32' height='32' fill='%23e76f51'/%3E%3Crect x='64' y='64' width='32' height='32' fill='%23e76f51'/%3E%3C/svg%3E") 32 round round;
border-image-slice: 24 24 24 24;
}
.input {
margin-bottom: 36px;
width: 75px;
}
#select {
position: relative;
top: -4px;
width: 100px;
}JS
document.querySelectorAll('.input').forEach((el) => el.addEventListener('change', function () {
var num1 = document.querySelector('#num1').value;
var num2 = document.querySelector('#num2').value;
var num3 = document.querySelector('#num3').value;
var num4 = document.querySelector('#num4').value;
document.querySelectorAll('.box').forEach((n) => n.style.setProperty('border-image-slice', num1 + ' ' + num2 + ' ' + num3 + ' ' + num4));
}));HTML
<div class="info">
<p>За допомогою властивості <code>border-image-slice</code> ми можемо повідомити браузер, де "зрізати" зображення для створення частин кордону.</p>
<p>Нижче розташовані три блоки. Для першого застосоване значення буз задання (тобто 100%) кордон, для двох інших - <em>30%</em> і <em>7 12 14 5</em> відповідно. При чому, ширина кордона дорівнює 16px.</p>
</div>
<div class="wrapper">
<div class="block"></div>
<div class="block small"></div>
<div class="block big"></div>
</div>CSS
* {
box-sizing: border-box;
}
body {
font-family: monospace;
font-size: 20px;
text-align:center;
}
.info {
padding: 6px 16px;
}
code {
font-weight: 700;
color: #444;
border-bottom: 2px solid #666;
}
.wrapper {
display: flex;
justify-content: space-around;
}
.block {
width: 150px;
height: 150px;
background-color: gold;
padding: 16px;
border: 32px solid #444;
border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 3 3'%3E%3Crect width='3' height='3' fill='%232a9d8f'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23e9c46a'/%3E%3Crect width='1' height='1' fill='%23e63946'/%3E%3Crect x='2' width='1' height='1' fill='%23e63946'/%3E%3Crect y='2' width='1' height='1' fill='%23e63946'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23e63946'/%3E%3C/svg%3E") 32;
}
.block.small {
border-image-slice: 30%;
}
.block.big {
border-image-slice: 7 12 14 5;
}HTML
<div class="block">
<p>Ось такий гарний візерунок <br> замість нудної лінії...</p>
</div>CSS
.block {
width: 500px;
height: 350px;
font-family: sans-serif;
font-size: 18px;
text-align: center;
padding-top: 12%;
box-sizing: border-box;
border: 28px solid #666;
border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Crect width='48' height='48' fill='%23e9c46a'/%3E%3Crect x='16' y='16' width='16' height='16' fill='%232a9d8f'/%3E%3Crect width='16' height='16' fill='%23e76f51'/%3E%3Crect x='32' width='16' height='16' fill='%23e76f51'/%3E%3Crect y='32' width='16' height='16' fill='%23e76f51'/%3E%3Crect x='32' y='32' width='16' height='16' fill='%23e76f51'/%3E%3C/svg%3E");
border-image-slice: 0 16 32 16;
/* border-image-width: 0.6em 1.0em; */
/* border-image-outset: 0em 1.1em 1.5em 0.6em; */
border-image-repeat: stretch;
}Приклад використання властивості
HTML
<div class="block"></div>CSS
.block {
background-color: #eee;
width: 300px;
height: 250px;
border: 16px solid #666;
border-image: linear-gradient(red, yellow);
border-image-slice: 0 0 8 16;
}Коментарі
Коментарів ще немає — будьте першим!