border-image-repeat у CSS — повтор картинки в межі

автор: Svitlana

Загальний опис

автор: NagarD

Порада

Щоб зекономити час, рекомендується використовувати 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

Значення без задання: stretch
Наслідує: Ні
Анімується: Ні
JavaScript синтаксис: object.style.borderImageRepeat="round"

Переглядачі

Переглядач Google Chrome Mozilla Firefox Apple Safari Opera Microsoft EDGE Microsoft Internet Explorer
15 15 6 15 12 11
Переглядач Mobile Google Android Mobile Google Chrome Mobile Mozilla Firefox Mobile Apple Safari
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; }
автор: Svitlana

HTML

<div class="block"></div>

CSS

.block {
  background-color: #eee;
  width: 300px;
  height: 250px;
  border: 16px solid #666;
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 3 3'%3E%3Crect width='3' height='3' fill='%232a9d8f'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23e9c46a'/%3E%3Crect width='1' height='1' fill='%23e63946'/%3E%3Crect x='2' width='1' height='1' fill='%23e63946'/%3E%3Crect y='2' width='1' height='1' fill='%23e63946'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23e63946'/%3E%3C/svg%3E"); 
  border-image-slice: 16; 
  border-image-repeat: round; 
}
автор: Svitlana

Чотири однакові коробки з тією самою картинкою межі, нарізаною на шматки по 30px. Змінюється лише border-image-repeat. Візерунок навмисно зроблено з чітких смужок, тож видно все: stretch розтягує один шматок на всю сторону, repeat кладе цілі шматки, але обрізає крайні, round трохи стискає шматок, щоб улізло ціле число, space лишає шматки цілими й розсовує їх проміжками. Кути (зелений і синій) у всіх чотирьох однакові — їх ця властивість не чіпає. Останній ряд — два значення нарізно для горизонтальних і вертикальних сторін.

HTML

<div class="row">
    <figure><div class="b stretch"></div><figcaption>stretch — типове: один шматок на всю сторону</figcaption></figure>
    <figure><div class="b repeat"></div><figcaption>repeat — цілі шматки, крайні обрізано</figcaption></figure>
</div>

<div class="row">
    <figure><div class="b round"></div><figcaption>round — шматок стиснуто, щоб улізло ціле число</figcaption></figure>
    <figure><div class="b space"></div><figcaption>space — шматки цілі, зайве пішло в проміжки</figcaption></figure>
</div>

<p class="cap">Два значення: перше — верх і низ, друге — боки:</p>
<div class="row">
    <figure><div class="b mixed"></div><figcaption>space stretch</figcaption></figure>
    <figure><div class="b killed"></div><figcaption>нижче написано border: 30px solid — картинки немає</figcaption></figure>
</div>

CSS

.row {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    margin-bottom: 8px;
}

figure {
    margin: 0;
}

figcaption {
    margin-top: 6px;
    max-width: 230px;
    font: .8em/1.35 system-ui, sans-serif;
    color: #5a6472;
}

.cap {
    margin: 18px 0 8px;
    font: 600 .9em/1.45 system-ui, sans-serif;
    color: #5a6472;
}

.b {
    width: 200px;
    height: 90px;
    background: #fff;
    border: 30px solid #8a94a6;
    border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Crect width='90' height='90' fill='%23f2b134'/%3E%3Crect width='30' height='30' fill='%2372b043'/%3E%3Crect x='60' width='30' height='30' fill='%232f6fd0'/%3E%3Crect y='60' width='30' height='30' fill='%232f6fd0'/%3E%3Crect x='60' y='60' width='30' height='30' fill='%2372b043'/%3E%3Crect x='40' width='10' height='30' fill='%23c0392b'/%3E%3Crect x='40' y='60' width='10' height='30' fill='%23c0392b'/%3E%3Crect y='40' width='30' height='10' fill='%23c0392b'/%3E%3Crect x='60' y='40' width='30' height='10' fill='%23c0392b'/%3E%3C/svg%3E");
    border-image-slice: 30;
}

.stretch { border-image-repeat: stretch; }
.repeat { border-image-repeat: repeat; }
.round { border-image-repeat: round; }
.space { border-image-repeat: space; }
.mixed { border-image-repeat: space stretch; }

.killed {
    border-image-repeat: round;
    border: 30px solid #8a94a6;
}
автор: NagarD

HTML

<div class="info">
	<p>За допомогою властивості <code>border-image-repeat</code> ми можемо встановити, як зображення для кордонів масштабуються та повторюється.</p>
	<p>Нижче розташовані три блоки. Для першого застосовання значення без задання (тобто stretch) кордон, для двох інших - round і repeat відповідно.</p>
</div>

<div class="wrapper">
	<div class="block"></div>
	<div class="block round"></div>
	<div class="block repeat"></div>
</div>

CSS

* {
	box-sizing: border-box;
}

body {
	font-family: monospace;
	font-size: 17px;
  text-align:center;
}

.info {
	padding: 6px 16px;
}

code {
	font-weight: 700;
	color: #444;
	border-bottom: 2px solid #666;
}

.wrapper {
	display: flex;
	justify-content: space-around;
}

.block {
	width: 150px;
	height: 150px;
	background-color: #4f4f4f;
	border: 20px solid #666;
  border-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='84'%20height='84'%20viewBox='0%200%203%203'%3E%3Crect%20width='3'%20height='3'%20fill='%23e9c46a'/%3E%3Crect%20width='1'%20height='1'%20fill='%23e63946'/%3E%3Crect%20x='2'%20width='1'%20height='1'%20fill='%23e63946'/%3E%3Crect%20y='2'%20width='1'%20height='1'%20fill='%23e63946'/%3E%3Crect%20x='2'%20y='2'%20width='1'%20height='1'%20fill='%23e63946'/%3E%3Cpath%20d='M1%200%201.5%201%202%200Z'%20fill='%23264653'/%3E%3Cpath%20d='M1%203%201.5%202%202%203Z'%20fill='%23264653'/%3E%3Cpath%20d='M0%201%201%201.5%200%202Z'%20fill='%23264653'/%3E%3Cpath%20d='M3%201%202%201.5%203%202Z'%20fill='%23264653'/%3E%3Crect%20x='1'%20y='1'%20width='1'%20height='1'%20fill='%23f7f7f7'/%3E%3C/svg%3E");
  border-image-slice: 28; 
}

.block.round {
	border-image-repeat: round round;
}

.block.repeat {
	border-image-repeat: repeat repeat;
}
автор: Svitlana

HTML

<div class="block">
  <p>Ось такий гарний візерунок <br> замість нудної лінії...</p>
</div>

CSS

.block {
  width: 500px;
  height: 350px;
  
  font-family: sans-serif;
  font-size: 18px;
  text-align: center;
  padding-top: 12%;
  box-sizing: border-box;
  
  border: 20px solid #666;
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 3 3'%3E%3Crect width='3' height='3' fill='%232a9d8f'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23e9c46a'/%3E%3Crect width='1' height='1' fill='%23e63946'/%3E%3Crect x='2' width='1' height='1' fill='%23e63946'/%3E%3Crect y='2' width='1' height='1' fill='%23e63946'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23e63946'/%3E%3C/svg%3E");
  border-image-slice: 28; 
/*   border-image-width: 0.6em 1.0em;  */
/*   border-image-outset: 0em 1.1em 1.5em 0.6em;  */
  border-image-repeat: repeat stretch; 
}
автор: Svitlana

HTML

<div class="box">

<p>У цьому прикладі, Ви можете змінювати значення для властивості <strong>border-image-repeat</strong>.</p>

<p>Вона встановлює тип масштабування та повторення зображення кордону елемента на сторінці.</p>

<strong>border-image-repeat: </strong>
<select class="input" id="select">
  <option value="stretch" name="value2" selected>stretch</option>
  <option value="repeat" name="value2">repeat</option>
  <option value="round" name="value2">round</option>
  <option value="space" name="value2">space</option>
</select> 
<strong>;</strong>
  
</div>

CSS

* {
  box-sizing: border-box;
}

body {
  font-family: monospace;
  font-size: 16px;
  line-height: 1.45;
  height: 100vh;
  padding: 16px;
}

.box {
  background-color: #f7f7f7;
  padding: 16px;
  border: 20px solid #666;
  border-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='84'%20height='84'%20viewBox='0%200%203%203'%3E%3Crect%20width='3'%20height='3'%20fill='%23e9c46a'/%3E%3Crect%20width='1'%20height='1'%20fill='%23e63946'/%3E%3Crect%20x='2'%20width='1'%20height='1'%20fill='%23e63946'/%3E%3Crect%20y='2'%20width='1'%20height='1'%20fill='%23e63946'/%3E%3Crect%20x='2'%20y='2'%20width='1'%20height='1'%20fill='%23e63946'/%3E%3Cpath%20d='M1%200%201.5%201%202%200Z'%20fill='%23264653'/%3E%3Cpath%20d='M1%203%201.5%202%202%203Z'%20fill='%23264653'/%3E%3Cpath%20d='M0%201%201%201.5%200%202Z'%20fill='%23264653'/%3E%3Cpath%20d='M3%201%202%201.5%203%202Z'%20fill='%23264653'/%3E%3Crect%20x='1'%20y='1'%20width='1'%20height='1'%20fill='%23f7f7f7'/%3E%3C/svg%3E");
  border-image-slice: 28; 
}

.input {
  margin-bottom: 36px;
  width: 75px;
}

#select {
  position: relative;
  top: -4px;
  width: 100px;
}

JS

document.querySelectorAll('.input').forEach((el) => el.addEventListener('change', function () {
  var sel = document.querySelector('#select').selectedOptions[0].textContent;
  document.querySelectorAll('.box').forEach((n) => n.style.setProperty('border-image-repeat', sel));
}));
автор: Svitlana

Коментарі

Коментарів ще немає — будьте першим!

Відповідь для

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~		 Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень		 Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле веде сходинками (розділ → тип → сторінка), а хибний ключ підкреслить хвилею.
[[!sandbox/S0oh1hBm]] Живий приклад окремим рядком — саме вікно результату. Той самий ключ зі знаком !: наберіть [[! і дійдіть сходинками до потрібної сторінки, список покаже її приклади.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```		 Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження		 Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox		 Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає		 Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.		 Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||		 Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Увійдіть — коментар з'явиться одразу, без капчі й очікування перевірки.

Правка
Зворотний зв'язок
Вхід