Свойство CSS mask-origin

❮ Предыдущий Полное руководство по CSS Далее ❯

Пример

Использование mask-origin: border-box;и mask-origin: content-box;:

.mask1 {
width: 600px;
height: 400px;
background: green;
border: 20px solid red;
padding: 50px;
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size: 80%;
mask-size: 80%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-origin: border-box;
mask-origin: border-box;
}

.mask2 {
width: 600px;
height: 400px;
background: green;
border: 20px solid red;
padding: 50px;
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size: 80%;
mask-size: 80%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-origin: content-box;
mask-origin: content-box;
}

Другие примеры «Попробуйте сами» ниже.

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

Свойство mask-originуказывает исходную позицию (область положения маски) изображения слоя маски.

Значение по умолчанию:	пограничный ящик
Унаследовано:	нет
Анимация:	нет. Читать об анимации
Версия:	CSS3
Синтаксис JavaScript:	объект .style.maskOrigin="padding-box"

Поддержка браузера

Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает это свойство.

Цифры, за которыми следует -webkit-, указывают на первую версию, которая работала с префиксом.

Property
mask-origin	4.0 -webkit-	79.0 -webkit-	53.0	4.0 -webkit-	15.0 -webkit-

Синтаксис CSS

Значения свойств

Value	Description
border-box	The position is relative to the border box. This is default
content-box	The position is relative to the content box
padding-box	The position is relative to the padding box
margin-box	The position is relative to the margin box
fill-box	The position is relative to the object bounding box
stroke-box	The position is relative to the stroke bounding box
view-box	Use the nearest SVG viewport as reference box
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit