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; 
}

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

Всі Коментарі (0)

Зареєструйся на сайті, аби мати змогу залишати коментарі. Зареєструватися  чи
Немає Коментарів