 |
VOOZH | about |
|
VOOZH | about |
The CSS mask-origin property determines the positioning reference of a CSS mask image applied to an element using mask-image. It defines where the mask image originates within the element's box model, influencing how the mask is positioned and clipped.
Syntax:
mask-origin: Keyword values
/* Or */
mask-origin: Multiple values
/* Or */
mask-origin: Non-standard keyword values
/* Or */
mask-origin: Global valuesProperty values: This property accepts the values mentioned above and described below:
| Category | Description |
|---|---|
| Keyword values | Values like content-box, padding-box, margin-box, border-box, fill-box, stroke-box, view-box, etc. |
| Non-standard keyword values | Values like padding, border, content, etc. |
| Multiple values | Combinations like padding-box, fill-box, view-box, border-box, etc. |
| Global values | Values like inherit, unset, initial, etc. |
Example 1: Below is the example that illustrates the mask-origin property using border-box :
Output:
Example 2: Below is the example that illustrates the mask-origin property using content-box :
Output:
Browsers Supported:
