css властивість border-image-repeat


Властивість border-image-repeat задає спосіб повторення внутрішньої частини границі у вигляді малюнків.

Властивість `border-image-repeat`

border-image-repeat використовується разом з такими властивостями як border-image-source, border-image-slice, border-image-width, border-image-outset для стилізування меж елементів.

Якщо цій властивості задано два значення, перше впливає тільки на горизонтальні сторони елемента, друге - на вертикальні. Якщо задано одне значення, воно впливає як на горизонтальні, так і вертикальні сторони.

Порада:

Щоб зекономити час, рекомендується використовувати border-image для встановлення всіх властивостей для зображення межі одним правилом.

Порада:

Зверніть увагу, border-image використовується замість border-style, який буде показаний тільки у випадку, якщо сталася помилка при завантаженні зображення, або для border-image встановлене значення none.

Синтаксис

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; 


}

Додаткові посилання