-webkit-mask-origin
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.
La propiedad CSS -webkit-mask-origin determina el origen de una imagen de máscara. El valor de la propiedad -webkit-mask-position se interpreta en relación al valor de esta propiedad. No se aplica cuando -webkit-mask-attachment es fixed.
| 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
- padding
-
Valor por defecto. La posición de la imagen de máscara es relativa al padding (relleno). (Para cajas solas "
0 0" es la esquina superior izquierda del límite del padding, "100% 100%" es la esquina inferior derecha.) - border
-
La posición de la imagen de máscara es relativa al borde.
- content
-
La posición de la imagen de máscara es relativa al contenido.
Ejemplos
.example {
border: 10px double;
padding: 10px;
-webkit-mask-image: url("mask.png");
/* La imagen de máscara estará dentro del padding */
-webkit-mask-origin: content;
}
div {
-webkit-mask-image: url("mask1.png"), url("mask2.png");
-webkit-mask-origin: padding, content;
}
Compatibilidad con navegadores
BCD tables only load in the browser