css властивість border-image-repeat
Властивість border-image-repeat задає спосіб повторення внутрішньої частини границі у вигляді малюнків.
border-image-repeat використовується разом з такими властивостями як border-image-source, border-image-slice, border-image-width, border-image-outset для стилізування меж елементів.
Якщо цій властивості задано два значення, перше впливає тільки на горизонтальні сторони елемента, друге - на вертикальні. Якщо задано одне значення, воно впливає як на горизонтальні, так і вертикальні сторони.
| Порада: | Щоб зекономити час, рекомендується використовувати |
| Порада: | Зверніть увагу, |
Синтаксис
border-image-repeat: stretch|repeat|round|initial|inherit;Властивість border-image-repeat може отримувати 6 значень:
stretchЗображення розтягується.
repeatЗображення повторюється.
roundЗображення повторюється. Якщо воно не заповнює область з цілим рядом плиток, тоді зображення масштабується.
spaceЗображення повторюється. Якщо воно не заповнює область з цілим рядом плиток, тоді додатковий простір розподіляється навколо плитки.
initialВстановлює властивість у значення без задання
inheritВказує на спадковість властивості від свого батьківського елемента
| Значення без задання: | stretch |
|---|---|
| Наслідує: | Ні |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.borderImageRepeat="round" |
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
| border-image-repeat | 15.0 |
11.0 |
15.0 |
6.0 |
15.0 |
Мобільних переглядачів ще не додано.
Мобільних переглядачів ще не додано.
Приклади
Динамічний приклад
Демонстрація роботи властивості
Демонстрація роботи властивості
Приклад використання властивості
Як буде повторюватися зображення
borderimg {
border-image-source: url(border.png);
border-image-repeat: repeat;
}