Manuales 
mask-clip 302k11
The mask-clip property determines the mask painting area, which determines the area of an element that is affected by a mask. The painted (visible) content of an element must be restricted to this area. m7217
The mask-clip property can be used on an HTML element or an SVG element. Each of these elements has different values that apply to one and not to the other. See the Values section below for more information.
The mask-clip property behaves and takes the same values as the background-clip property entry for a more detailed view into clipping. The same concepts that apply there also apply to the mask-clip property.
Official Syntax 4j1l4a
- Syntax:
mask-clip: [ <geometry-box> | no-clip ]# /* where */ <geometry-box> = content-box | padding-box | border-box | margin-box | fill-box | stroke-box | view-box - Initial: border-box
- Applies To: All elements. In SVG, it applies to container elements excluding the <defs> element and all graphics elements
- Animatable: no
Notes 5i3os
The margin-box, border-box, padding-box, and content-box values are applicable to HTML elements that have a box model, and compute to fill-box when applied to an SVG element.
The fill-box, stroke-box, and view-box values are applicable to SVG elements, and compute to the initial value of mask-clip when used on HTML elements.
The hash tag (#) indicates that the property takes any number values. The list of mask-clip values is comma-separated.
When the mask-clip property takes a list of comma-separated values, each value is applied to a corresponding mask layer image specified in the mask-image property (first value for the first image, second value for the second image, and so on).
Values 4w6m73
- content-box
- The painted content (visible part of the element) is restricted to (clipped to) the content box.
- padding-box
- The painted padding (visible part of the element) is restricted to (clipped to) the padding box.
- border-box
- The painted border (visible part of the element) is restricted to (clipped to) the border box.
- margin-box
- The painted margin (visible part of the element) is restricted to (clipped to) the margin box.
- fill-box
- The painted margin (visible part of the element) is restricted to (clipped to) the object bounding box.
- stroke-box
- The painted margin (visible part of the element) is restricted to (clipped to) the stroke bounding box.
- view-box
-
Uses the nearest SVG viewport as reference box.
If a
viewBoxattribute is specified for the SVG viewport creating element, then the reference box is positioned at the origin of the coordinate system established by theviewBoxattribute, and The dimension of the reference box is set to the width and height values of theviewBoxattribute. - no-clip
- The painted (visible part of the element) content is not restricted (not clipped).
Notes 5i3os
For SVG elements without associated CSS layout box, the values content-box, padding-box, border-box and margin-box compute to fill-box.
For elements with associated CSS layout box, the values fill-box, stroke-box and view-box compute to the initial value of mask-clip.
Examples 3y6d6i
The following example sets the mask painting area of two mask layer images specified using the mask-image property:
.el {
mask-image: url(myMask.png), url(secondMask.png);
mask-clip: content-box, border-box;
}
See the next section for a live demo and visual example.
Live Demo 176n59
In the following demo, the following mask image is used:
The mask image is repeated. The element it is applied to has a white background, some text, and an image inside it. The element also has padding and a 10px border.
The applied value of mask-clip is padding-box. Try changing the value to content-box or border-box to see more of the element show through the mask.
This is how the element looks like when the content, padding, and border boxes are used as mask painting areas:
content-box value is used as a mask painting area, only parts of the element that lie within its content box can be visible through the mask, even if the mask extends beyond that box. When the padding-box is used, the content and any extra padding around it can be painted through the mask. When the border-box value is used, any borders on the element can show through the mask.
Keep in mind that if the mask is smaller than the content area, for example, then, even if you specify padding-box as a value, the padding won’t be visible through the mask because it does not extend enough to allow it to show through.
Browser s162l
CSS Masks 3o38a
Method of displaying part of an element, using a selected image as a mask
W3C Candidate Recommendation
ed from the following versions:
Desktop 1i5h4c
- No
- 53
- No
- No
- No
Mobile / Tablet 1u2r2g
- No
- No
- No
- No
- 60
Notes 5i3os
This module, as you can see in the table above, hasn’t been fully implemented in all browsers, so you’re probably not going to be able to use all features even in browsers that have implemented certain properties (for the time being).
In the meantime, you can check out this open source feature table by Alan Greenblatt on GitHub. The purpose of this table is to provide some insight into what the current state of affairs is with various browser implementations of CSS Clipping and Masking features.