CSS-свойство `-webkit-mask-box-image`

Нестандартное свойство -webkit-mask-box-image с префиксом — это CSS-сокращённое свойство, которое задаёт изображение маски для рамочной области элемента.

Составные свойства

Это свойство является сокращённой записью следующих CSS-свойств:

• -webkit-mask-border-source
• -webkit-mask-border-outset
• -webkit-mask-border-repeat

Значения включают <image>, используемое в качестве границы маски, и, при необходимости, четыре значения выноса границы и до двух стилей повтора границы.

Синтаксис

/* default */
-webkit-mask-box-image: none;

/* image */
-webkit-mask-box-image: url("image.png");

/* image edge-offset */
-webkit-mask-box-image: url("image.png") 10 20 20 10;
-webkit-mask-box-image: url("image.png") 10px 20px 20px 10px;

/* image repeat-style */
-webkit-mask-box-image: url("image.png") space repeat;

/* image edge-offset repeat-style */
-webkit-mask-box-image: url("image.png") 10px 20px 20px 10px space repeat;

/* Global values */
-webkit-mask-box-image: inherit;
-webkit-mask-box-image: initial;
-webkit-mask-box-image: revert;
-webkit-mask-box-image: revert-layer;
-webkit-mask-box-image: unset;

Значения

<image>

Адрес ресурса изображения, используемого в качестве изображения маски, <gradient> или другого значения <image>.

none

Указывает, что у рамочной области не должно быть изображения маски.

<length>

Размер выноса изображения маски. Возможные единицы измерения см. в разделе <length>.

<percentage>

Вынос изображения маски задаётся в процентах относительно соответствующего размера рамочной области (ширины или высоты).

<number>

Размер выноса изображения маски в пикселях.

repeat

Изображение маски повторяется столько раз, сколько необходимо, чтобы заполнить рамочную область. Если размеры изображения маски не позволяют заполнить рамочную область без остатка, может отображаться часть изображения.

stretch

Изображение маски растягивается так, чтобы точно заполнить рамочную область.

round

Изображение маски немного растягивается и повторяется таким образом, чтобы в конце рамочной области не оставалось его неполной копии.

space

Изображение маски повторяется максимально возможное количество раз без растягивания. В конце рамочной области не остаётся неполной копии изображения маски.

Значения выноса, или смещения краёв, задают расстояния от верхнего, правого, нижнего и левого краёв изображения в указанном порядке. Значения можно задавать как <length>, <number> или <percentage>; числа интерпретируются как длины в пикселях.

Если стили повтора границы указаны, они интерпретируются в порядке <repeat-x> <repeat-y>. Если задано только одно значение, оно применяется к обеим осям. В отличие от background-repeat, значения cover и contain не поддерживаются.

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

• Начальное значение: none
• Применяется к: всем элементам
• Наследуется: нет
• Вычисленное значение: как задано

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

-webkit-mask-box-image = <mask-image-source> [ <mask-image-offset>{4} <mask-border-repeat>{1,2} ]

Примеры

Задание изображения

.example-one {
  -webkit-mask-box-image: url("mask.png");
}

Смещение и заполнение изображения

.example-two {
  -webkit-mask-box-image: url("logo.png") 100px 100px 0px 0px round round;
}

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

Не входит ни в один стандарт.

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

См. также

• CSS-свойство mask-border
• CSS-свойство border-image
• Справочник по CSS Safari: -webkit-mask-box-image