Atributo mask-clip de CSS

Página anterior mask
Página siguiente mask-composite

定义和用法

mask-clip 属性用于指定遮罩图像影响的区域。

实例

展示 mask-clip 属性的不同值：

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

Pruebe usted mismo

Sintaxis de CSS

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

Valor del atributo

Valor	Descripción
border-box	El contenido dibujado se recorta al cuadro de borde (border box). Valor predeterminado.
content-box	El contenido dibujado se recorta al cuadro de contenido (content box).
padding-box	El contenido dibujado se recorta al cuadro de relleno (padding box).
fill-box	El contenido dibujado se recorta al cuadro de límites del objeto (object bounding box).
stroke-box	El contenido dibujado se recorta al cuadro de límites de trazo (stroke bounding box).
view-box	Use el viewport SVG más cercano como cuadro de referencia.
no-clip	No realizar recorte.
border	Igual que border-box.
padding	Igual que padding-box.
content	Igual que content-box.
text	Corte la máscara al texto del elemento.
initial	Establezca este atributo en su valor predeterminado. Vea initial.
inherit	Hereda este atributo de su elemento padre. Vea inherit.

Detalles técnicos

Valor predeterminado:	border-box
Herencia:	No
Producción de animación:	No se admite. Consulte:Atributos relacionados con la animación.
Versión:	Módulo de Masking de CSS Nivel 1
Sintaxis de JavaScript:	object.style.maskClip="padding-box"