-webkit-mask-clip

Baseline 2023 *

Newly available

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Some parts of this feature may have varying levels of support.

No estándar: Esta función no está estandarizada. No recomendamos usar funciones no estándar en producción, ya que tienen un soporte limitado en los navegadores y pueden cambiar o eliminarse. Sin embargo, pueden ser una alternativa adecuada en casos específicos donde no exista una opción estándar.

Si se especificado -webkit-mask-image , -webkit-mask-clip determina el comportamiento de recorte (clipping) de la imagen de máscara.

Valor inicial	`border-box`
Applies to	all elements; In SVG, it applies to container elements excluding the `<defs>` element and all graphics elements
Heredable	no
Valor calculado	como se especifica
Animation type	discrete

Síntaxis

mask-clip = 
  [ <coord-box> | no-clip ]#  

<coord-box> = 
  <paint-box>  |
  view-box     

<paint-box> = 
  <visual-box>  |
  fill-box      |
  stroke-box    

<visual-box> = 
  content-box  |
  padding-box  |
  border-box

donde:

<clip-style>: border | padding | content | text

Valores

border: Si se ha especificado border , la máscara de imagen se extiende hasta el borde del elemento.
padding: Si se ha especificado padding , la imagen de máscara de extiendo hasta el padding (relleno) del elemento.
content: Si se ha espeficiado content , la imagen de máscara se recorta al tamaño del contenido del elemento.
text: Si se ha especificado text , la imagen de máscara de recorta al tamaño del texto del elemento.

Ejemplo

css

div {
  -webkit-mask-image: url("images/mask.png");
  -webkit-mask-clip: padding;
}

Compatibilidad con navegadores

Ver además

-webkit-mask, -webkit-mask-origin, -webkit-mask-box-image, -webkit-mask-image,-webkit-mask-composite,-webkit-mask-repeat