-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.
* 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.
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
mask-origin =
<coord-box>#
<coord-box> =
<paint-box> |
view-box
<paint-box> =
<visual-box> |
fill-box |
stroke-box
<visual-box> =
content-box |
padding-box |
border-box
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
Loading…
Ver además
-webkit-mask, -webkit-mask-box-image, -webkit-mask-attachment, -webkit-mask-image,-webkit-mask-composite, -webkit-mask-repeat, -webkit-mask-clip