CSS-свойство `mask-border-repeat`

Базовый уровень Ограниченная доступность

Эта функция не относится к базовому уровню, поскольку она не работает в некоторых наиболее широко используемых браузерах.

Свойство mask-border-repeat CSS задаёт способ масштабирования и замощения изображений для боковых и средней частей изображения маски границы.

Синтаксис

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

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

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

Для свойства mask-border-repeat можно указать одно или два значения из приведённого ниже списка.

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

Значения

stretch: Краевые области исходного изображения растягиваются, чтобы заполнить промежуток между границами.
repeat: Краевые области исходного изображения замощаются (повторяются), чтобы заполнить промежуток между границами. Для точного размещения фрагменты могут обрезаться.
round: Краевые области исходного изображения замощаются (повторяются), чтобы заполнить промежуток между границами. Для точного размещения фрагменты могут растягиваться.
space: Краевые области исходного изображения замощаются (повторяются), чтобы заполнить промежуток между границами. Для точного размещения свободное пространство равномерно распределяется между фрагментами.

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

Исходное значение	stretch
Применяется к	всем элементам; в SVG применяется к контейнерным элементам, за исключением элемента `<defs>` и всех графических элементов
Наследуется	нет
Вычисленное значение	как задано
Тип анимации	дискретный

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

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

Примеры

Основное использование

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

mask-border-repeat: round;

Браузеры на основе Chromium поддерживают устаревшую версию этого свойства — mask-box-image-repeat — с префиксом:

-webkit-mask-box-image-repeat: round;

Примечание: На странице mask-border приведён работающий пример (в котором используются устаревшие свойства маски границы с префиксом, поддерживаемые в Chromium), позволяющий оценить эффект.

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

Спецификация
Модуль маскирования CSS, уровень 1 # the-mask-border-repeat

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

	Настольные компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome для Android	Firefox для Android	Opera для Android	Safari в iOS	Samsung Internet	WebView для Android	WebView в iOS
`mask-border-repeat`	1	79	Нет	15	17.2 3.1	18	Нет	14	17.2 2	1.0	4.4	17.2 2

См. также

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