-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
div {
-webkit-mask-image: url("images/mask.png");
-webkit-mask-clip: padding;
}
Compatibilidad con navegadores
Loading…
Ver además
-webkit-mask, -webkit-mask-origin, -webkit-mask-box-image, -webkit-mask-image,-webkit-mask-composite,-webkit-mask-repeat