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

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

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

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

правити

Порада

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

автор: Svitlana правити

Порада

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

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

border-image-repeat: stretch|repeat|round|initial|inherit;

Властивість border-image-repeat може отримувати 6 значень:

stretch

Зображення розтягується.

автор: Svitlana

правити

repeat

Зображення повторюється.

автор: Svitlana

правити

round

Зображення повторюється. Якщо воно не заповнює область з цілим рядом плиток, тоді зображення масштабується.

автор: Svitlana

правити

space

Зображення повторюється. Якщо воно не заповнює область з цілим рядом плиток, тоді додатковий простір розподіляється навколо плитки.

автор: Svitlana

правити

initial

Встановлює властивість у значення без задання

автор: Svitlana

правити

inherit

Вказує на спадковість властивості від свого батьківського елемента

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
border-image-repeat	15.0	15.0	6.0	15.0	11.0

Мобільних переглядачів ще не додано.

Приклади

+ запропонувати свій приклад у пісочниці

<div class="box st">stretch (типово)</div>
<div class="box re">repeat</div>

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