-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 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
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
div {
-webkit-mask-image: url("images/mask.png");
-webkit-mask-clip: padding;
}
Compatibilidad con navegadores
BCD tables only load in the browser