mask-border-repeat

Ограниченная доступность

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

Свойство 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 Masking Module Level 1 # the-mask-border-repeat

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`mask-border-repeat`	1	79	Нет	15	17.23.1	18	Нет	14	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/mask-border-repeat