css властивість border-image-repeat
Властивість border-image-repeat задає спосіб повторення внутрішньої частини границі у вигляді малюнків.
border-image-repeat використовується разом з такими властивостями як border-image-source, border-image-slice, border-image-width, border-image-outset для стилізування меж елементів.
Якщо цій властивості задано два значення, перше впливає тільки на горизонтальні сторони елемента, друге - на вертикальні. Якщо задано одне значення, воно впливає як на горизонтальні, так і вертикальні сторони.
автор: Svitlana
- Порада
-
Щоб зекономити час, рекомендується використовувати
автор: Svitlanaborder-imageдля встановлення всіх властивостей для зображення межі одним правилом. - Порада
-
Зверніть увагу,
автор: Svitlanaborder-imageвикористовується замістьborder-style, який буде показаний тільки у випадку, якщо сталася помилка при завантаженні зображення, або дляborder-imageвстановлене значення none.
Синтаксис
border-image-repeat: stretch|repeat|round|initial|inherit;Властивість border-image-repeat може отримувати 6 значень:
-
stretch -
Зображення розтягується.
автор: Svitlana -
repeat -
Зображення повторюється.
автор: Svitlana -
round -
Зображення повторюється. Якщо воно не заповнює область з цілим рядом плиток, тоді зображення масштабується.
автор: Svitlana -
space -
Зображення повторюється. Якщо воно не заповнює область з цілим рядом плиток, тоді додатковий простір розподіляється навколо плитки.
автор: Svitlana -
initial -
Встановлює властивість у значення без задання
автор: Svitlana -
inherit -
Вказує на спадковість властивості від свого батьківського елемента
автор: Svitlana
| Значення без задання: | stretch |
|---|---|
| Наслідує: | Ні |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.borderImageRepeat="round" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 15 | 15 | 6 | 15 | 12 | 11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 15 | 9.3 |
Приклади
+ запропонувати свій приклад у пісочниці
Як заповнювати сторони рамки нарізаними шматками: stretch розтягує один шматок на всю сторону, repeat укладає його копії.
HTML
<div class="box st">stretch (типово)</div>
<div class="box re">repeat</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-slice: 30;
}
.st { border-image-repeat: stretch; }
.re { border-image-repeat: repeat; }Демонстрація роботи властивості
Демонстрація роботи властивості
Приклад використання властивості
Динамічний приклад
Коментарі
Коментарів ще немає — будьте першим!