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

No estándar: Esta característica no es parte de los estándares. No la uses en sitios Web en producción: no funcionará para todos los usuarios. Podrían haber también incompatibilidades considerables entre distintas implementaciones y el comportamiento podría cambiar en el futuro.

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

Valor inicialborder-box
Applies toall elements; In SVG, it applies to container elements excluding the defs element and all graphics elements
Heredableno
Valor calculadocomo se especifica
Animation typediscrete

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

BCD tables only load in the browser

Ver además