border-image-repeat

Базовая Широко распространена

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с февраля 2017 года.

Свойство border-image-repeat CSS определяет, как области краёв и центральное изображение источника корректируются для соответствия размерам изображения границы элемента. Центральную область можно отобразить, используя ключевое слово «fill» в свойстве border-image-slice.

Попробовать

Синтаксис

/* Keyword value */
border-image-repeat: stretch;
border-image-repeat: repeat;
border-image-repeat: round;
border-image-repeat: space;

/* top and bottom | left and right */
border-image-repeat: round stretch;

/* Global values */
border-image-repeat: inherit;
border-image-repeat: initial;
border-image-repeat: revert;
border-image-repeat: revert-layer;
border-image-repeat: unset;

Свойство border-image-repeat может быть задано с использованием одного или двух значений из списка значений ниже.

При указании одного значения оно применяется ко всем четырём сторонам.
При указании двух значений первое применяется к верхней, центральной и нижней сторонам, второе к левой и правой.

Значения

stretch: Области краёв изображения источника растягиваются, чтобы заполнить промежутки между каждой границей.
repeat: Области краёв изображения источника повторяются, чтобы заполнить промежутки между каждой границей. Плитки могут быть обрезаны, чтобы достичь надлежащего соответствия.
round: Области краёв изображения источника повторяются, чтобы заполнить промежутки между каждой границей. Плитки могут быть растянуты, чтобы достичь надлежащего соответствия.
space: Области краёв изображения источника повторяются, чтобы заполнить промежутки между каждой границей. Дополнительное пространство будет распределено между плитками, чтобы достичь надлежащего соответствия.

Формальное определение

Начальное значение	`stretch`
Применяется к	всем элементам, кроме внутренних элементов таблицы, когда `border-collapse` имеет значение `collapse`. Также применяется к `::first-letter`.
Наследуется	нет
Вычисленное значение	как указано
Тип анимации	дискретный

Формальный синтаксис

border-image-repeat = 
  [ stretch | repeat | round | space ]{1,2}

Примеры

Повторяющиеся изображения границы

CSS

#bordered {
  width: 12rem;
  margin-bottom: 1rem;
  padding: 1rem;
  border: 40px solid;
  border-image: url("border.png") 27;
  border-image-repeat: stretch; /* Can be changed in the live sample */
}

Результаты

Спецификации

Спецификация
CSS Backgrounds and Borders Module Level 3 # the-border-image-repeat

Совместимость браузеров

	Рабочий стол					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`border-image-repeat`	15	12	15	15	6	18	15	14	9.3	1.0	4.4
`repeat`	15	12	≤72	15	6	18	79	14	9.3	1.0	4.4
`round`	30	12	15	17	9.1	30	15	18	9.3	2.0	4.4
`space`	56	12	50	43	9.1	56	50	43	9.3	6.0	56
`stretch`	15	12	≤72	15	6	18	79	14	9.3	1.0	4.4

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-repeat