Atributo mask-origin de CSS

Definition and usage

mask-origin The attribute specifies the original position of the mask layer image (i.e., the mask position area).

Example

Display mask-origin Different values of the attribute:

.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;
}

Try it yourself

CSS Syntax

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

Attribute value

Value Description
border-box Position relative to the border box. Default value.
content-box Position relative to the content box.
padding-box Position relative to the inner border box.
fill-box Position relative to the object boundary box.
stroke-box Position relative to the stroke boundary box.
view-box Uses the nearest SVG viewport as the reference frame.
initial Sets this property to its default value. See initial.
inherit Inherits this property from its parent element. See inherit.

Technical details

Default value: border-box
Inheritance: No
Animation creation: Not supported. See:Animation-related properties.
Version: CSS Masking Module Level 1
JavaScript Syntax: object.style.maskOrigin="padding-box"

Browser Support

The numbers in the table represent the first browser version to fully support this property.

Chrome Edge Firefox Safari Opera
120 120 53 15.4 106

Páginas relacionadas

Tutorial：CSS cubierta

Referencia：Atributo mask de CSS

Referencia：Atributo mask-clip de CSS

Referencia：Atributo mask-composite de CSS

Referencia：Atributo mask-image de CSS

Referencia：Atributo mask-mode de CSS

Referencia：Atributo mask-position de CSS

Referencia：Atributo mask-repeat de CSS

Referencia：Atributo mask-size de CSS

Referencia：Atributo mask-type de CSS