CSS propriedade mask-origin

Definição e uso

mask-origin O atributo especifica a posição original da imagem de máscara (ou seja, a área da posição da máscara).

Exemplo

Exibição mask-origin Valores diferentes do atributo:

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

Experimente você mesmo

Sintaxe do CSS

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

Valor do atributo

Valor Descrição
border-box Posição em relação ao retângulo da borda. Valor padrão.
content-box Posição em relação ao retângulo de conteúdo.
padding-box Posição em relação ao retângulo interno.
fill-box Posição em relação ao retângulo do objeto.
stroke-box Posição em relação ao retângulo de contorno.
view-box Use a mais recente viewport SVG como referência.
initial Defina essa propriedade como seu valor padrão. Veja initial.
inherit Herda essa propriedade do elemento pai. Veja inherit.

Detalhes técnicos

Valor padrão: border-box
Herança: Não
Produção de animação: Não suportado. Veja:Propriedades relacionadas a animação.
Versão: Módulo de Masking do CSS Nível 1
Sintaxe do JavaScript: object.style.maskOrigin="padding-box"

Suporte do navegador

Os números na tabela representam a versão do navegador que suporta completamente essa propriedade.

Chrome Edge Firefox Safari Opera
120 120 53 15.4 106

Páginas relacionadas

Tutorial:Máscara CSS

Referência:CSS propriedade mask

Referência:CSS propriedade mask-clip

Referência:CSS propriedade mask-composite

Referência:CSS propriedade mask-image

Referência:CSS propriedade mask-mode

Referência:CSS propriedade mask-position

Referência:CSS propriedade mask-repeat

Referência:CSS propriedade mask-size

Referência:CSS propriedade mask-type