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

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

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

Пример

Просмотр mask-origin Различные значения свойств:

.masked {
  background: green;
  border: 30px solid blue;
  padding: 20px;
  -webkit-mask-image: url(img_circle.svg);
  mask-image: url(img_circle.svg);
  mask-size: 50%;
  mask-repeat: no-repeat;
}
.mask1 {
  mask-origin: border-box;
}
.mask2 {
  mask-origin: content-box;
}
.mask3 {
  mask-origin: padding-box;
}
.mask4 {
  mask-origin: fill-box;
}

Попробуйте сами

CSS синтаксис

mask-origin: border-box|content-box|padding-box|fill-box|stroke-box|view-box|initial|inherit;

Значение атрибута

Значение Описание
border-box Позиция относительно рамки края. Значение по умолчанию.
content-box Позиция относительно рамки содержимого.
padding-box Позиция относительно рамки внутреннего поля.
fill-box Позиция относительно рамки объекта.
stroke-box Позиция относительно рамки обводки.
view-box Используйте ближайший SVG viewport в качестве参考ной рамки.
initial Этот атрибут устанавливается в его значение по умолчанию. См. также initial.
inherit Этот атрибут наследуется от родительского элемента. См. также inherit.

Технические детали

Значение по умолчанию: border-box
Инheritance: Нет
Создание анимации: Не поддерживается. См. также:Свойства, связанные с анимацией.
Версия: Модуль маскирования CSS уровня 1
JavaScript синтаксис: object.style.maskOrigin="padding-box"

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

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

Кروм Эдж Фаерфокс Сафари Опера
120 120 53 15.4 106

См. также:

Урок:CSS маски

См. также:CSS свойство mask

См. также:CSS свойство mask-clip

См. также:CSS свойство mask-composite

См. также:CSS свойство mask-image

См. также:CSS свойство mask-mode

См. также:CSS свойство mask-position

См. также:CSS свойство mask-repeat

См. также:CSS свойство mask-size

См. также:CSS свойство mask-type