clip de máscara

La mask-clippropiedad CSS es parte de la especificación de nivel 1 del módulo de enmascaramiento CSS y establece el área de pintura de máscara. Literalmente recorta el área de fondo de un elemento y define qué áreas se muestran a través de la máscara: borde, relleno o cuadro de contenido. Es como poner el marco en una foto, mostrando sólo las partes de la foto que no están cubiertas por el marco. Solo que, en este caso, configuramos lo que se recorta usando los valores del modelo de caja CSS.

.element {  mask-image: url(sun.svg);  mask-clip: padding-box;}

Esto funciona como la background-clippropiedad, excepto que tiene tres valores adicionales que se aplican a los elementos SVG. En la siguiente demostración, puede cambiar el área de pintura de la máscara usando esta propiedad. Hay la misma imagen debajo para mostrar el efecto de enmascarar mejor y marcar el borde y las áreas de relleno:

Sintaxis

mask-clip: geometry-box = margin-box | border-box | padding-box | content-box | fill-box | stroke-box | view-box | no-clip

• Valor inicial: border-box
• Se aplica a: todos los elementos. En SVG, se aplica a los elementos contenedores excluyendo el defselemento, todos los elementos gráficos.
• heredado: no
• Tipo de animación: discreta

Valores

/* Keyword values */mask-clip: border-box;mask-clip: content-box;mask-clip: fill-box;mask-clip: margin-box;mask-clip: padding-box;mask-clip: stroke-box;mask-clip: view-box;/* No clip */mask-clip: no-clip;/* Global values */mask-clip: intial;mask-clip: inherit;mask-clip: unset;

• border-box: El contenido pintado se recorta en el cuadro del borde. (Valor por defecto)
• content-box: el contenido pintado se recorta en el cuadro de contenido.
• fill-box: El contenido pintado se recorta en el cuadro delimitador del objeto.
• margin-box: El contenido pintado se recorta en el cuadro de margen.
• padding-box: El contenido pintado se recorta en el cuadro de relleno.
• stroke-box: El contenido pintado se recorta en el cuadro delimitador del trazo.
• view-box: Utiliza la ventana gráfica SVG más cercana como cuadro de referencia. Si se especifica un viewBoxatributo para el elemento de creación de la ventana gráfica SVG:
  • El cuadro de referencia se posiciona en el origen del sistema de coordenadas establecido por el viewBoxatributo.
  • La dimensión del cuadro de referencia se establece en los valores widthy heightdel viewBoxatributo.
• no-clip: El contenido pintado no se recorta.
• initial: Aplica la configuración predeterminada de la propiedad, que es border-box.
• inherit: Adopta el mask-clipvalor del padre.
• unset: Elimina la corriente mask-clipdel elemento.

Notas

• Para elementos SVG sin cuadro de diseño CSS asociado, los valores content-box, padding-boxse calculan para fill-boxy para border-boxy margin-boxse calculan para stroke-box.
• Para los elementos con un cuadro de diseño CSS asociado, los valores fill-boxse calculan hacia content-boxy para stroke-boxy view-boxse calculan hasta el valor inicial del mask-clipcual es border-box.

Usando múltiples valores

Esta propiedad puede tomar una lista de valores separados por comas para clips de máscara y cada valor se aplica a una imagen de capa de máscara correspondiente especificada en la mask-imagepropiedad. En el siguiente ejemplo, el primer valor especifica el área de pintura de máscara de la primera imagen, el segundo valor especifica el área de pintura de máscara de la segunda imagen, y así sucesivamente.

.element {  mask-image: url(image1.png), url(image2.png), url(image3.png);  mask-clip: padding-box, border-box, content-box;}

Manifestación

Soporte del navegador

ES DECIR	Borde	Firefox	cromo	Safari	Ópera
No	79+	53+	Hacer	4+	15+

androidcromo	Android Firefox	Navegador de Android	Safari en iOS	Ópera móvil
Hacer	Hacer	Hacer	Hacer	59+

Más información

Recorte y enmascaramiento en CSS

Chris Coyier

Enmascaramiento versus recorte: cuándo usar cada uno

Sara Drasner

#185: Jugar con máscaras CSS

Chris Coyier

Propiedades relacionadas

clip de máscara

.element { mask-clip: padding-box; } Mojtaba Seyedi

imagen-mascara

.element { mask-image: url(star.svg); } Chris Coyier

modo máscara

.element { mask-mode: alpha; } Mojtaba Seyedi

origen-mascarilla

.element { mask-origin: content-box; } Mojtaba Seyedi

posición de la máscara

.element { mask-position: 20px center; } Mojtaba Seyedi

repetición de máscara

.element { mask-repeat: repeat-y; } Chris Coyier

tamaño de máscara

.element { mask-size: 200px 100px; } Mojtaba Seyedi

tipo de máscara

.element { mask-type: alpha; } Mojtaba Seyedi