Propriedade mask-clip do CSS

Página anterior mask
Próxima página mask-composite

Definição e uso

mask-clip A propriedade é usada para especificar a área afetada pela imagem de máscara.

Exemplo

Exibição mask-clip Os diferentes valores da propriedade:

.masked {
  width: 150px;
  height: 150px;
  background: green;
  border: 30px solid blue;
  padding: 20px;
  -webkit-mask-image: url(img_circle.svg);
  mask-image: url(img_circle.svg);
  mask-size: 100% 100%;
}
.mask1 {
  mask-clip: border-box;
}
.mask2 {
  mask-clip: content-box;
}
.mask3 {
  mask-clip: padding-box;
}
.mask4 {
  mask-clip: fill-box;
}
.mask5 {
  mask-clip: stroke-box;
}

Experimente você mesmo

Sintaxe CSS

mask-clip: border-box|content-box|padding-box|fill-box|stroke-box|view-box|no-clip|border|padding|content|text|initial|inherit;

Valor do atributo

Valor	Descrição
border-box	O conteúdo desenhado é cortado até a caixa de borda (border box). Valor padrão.
content-box	O conteúdo desenhado é cortado até a caixa de conteúdo (content box).
padding-box	O conteúdo desenhado é cortado até a caixa de preenchimento (padding box).
fill-box	O conteúdo desenhado é cortado até a caixa de limites do objeto (object bounding box).
stroke-box	O conteúdo desenhado é cortado até a caixa de limites da tracejante (stroke bounding box).
view-box	Use a caixa de referência mais próxima da viewport SVG.
no-clip	Não cortar.
border	Igual a border-box.
padding	Igual a padding-box.
content	Igual a content-box.
text	Corte a máscara para o texto do elemento.
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 Mascaramento CSS Nível 1
Sintaxe do JavaScript:	object.style.maskClip="padding-box"