CSS3 Clipping and mask parsing

First, the use

CSS3 clipping and masking (Clipping and masking) to hide part of an element and show another part

Second, the difference

CSS3 clipping and masking (Clipping and masking) to hide part of an element and show another part

Three, crop 3.1 properties at a glance

3.1.1clip

Grammar

Clip:auto | Rect (top, right, bottom, left)

Meaning

• Sets the clipping for an absolutely positioned element, which is the default value for the property that is not recommended.
• The four offset values computed from the upper-left corner of the object (0,0). If auto, this edge does not cut

3.1.2clip-path

Grammar

Clip-path: <clip-source> | [<basic-shape> | | <geometry-box>] | None

Meaning

• Crop elements using either the underlying shape or the reference clippath element, the None value is the default value

List of attribute values

Use the base shape to crop through Clip-path

In addition to using the shapes above, you can also use Chrome's shapes plugin to draw polygons

<clipPath> element clipping element referencing the SVG definition

3.1.3 cropping a background image with text

Grammar

-webkit-background-clip:text;

Currently only supports WebKit kernel browser, use Polyfill to solve problems

Four, mask 4.1 properties at a glance

4.1.1mask-image

Grammar

Mask-image:none | <image> | <mask-source>

Meaning

Sets the mask image for an element, the value of none is the default value

4.1.2mask-mode

Grammar

Mask-mode:alpha | Luminance | Auto

Meaning

Set the mask's mode, auto is the default value

4.1.3mask-repeat

Grammar

Mask-repeat:repeat-x | repeat-y | [Repeat | space | round | no-repeat] {A}

Meaning

Set the repeating mode of the mask, no-repeat the default value

4.1.4mask-position

Grammar

Mask-position: <position> [, <position>]*

<position> = [Left | center | right | top | bottom | <percentage> | <length>]

Meaning

Set the location mode of the mask, center is the default value

4.1.5mask-clip

Grammar

Mask-clip: <geometry-box> | No-clip

<geometry-box> = <shape-box> | Fill | Stroke | View-box

<shape-box> = Margin-box | Border-box | Padding-box | Content-box

Meaning

Set the affected area of the mask, border-box the default value

4.1.6mask-origin

Grammar

Mask-origin: <geometry-box>

<geometry-box> = <shape-box> | Fill | Stroke | View-box

<shape-box> = Margin-box | Border-box | Padding-box | Content-box

Meaning

Set the reference Origin location when calculating mask-position, border-box as the default value

4.1.7mask-composite

Grammar

Mask-composite: <compositing-operator>#

<compositing-operator > = Add | Subtract | Intersect | Exclude

Meaning

Sets how the current matte layer is combined with the layer below.

Add, subtract, intersect, exclude, respectively

Equivalent to Source-over, Source-out, source-in, XOR in SVG

4.1.8mask

Grammar

Mask: <mask-reference> <masking-mode>? | | <position> [/<bg-size>]? | |

<repeat-style> | | <geometry-box> | | [<geometry-box> | no-clip] | |

<compositing-operator>

Meaning

Sets the composite properties of the matte.

A < Geometry-box > value will set both Mask-origin and MASK-LICP if there are two values representing Mask-origin and Mask-clip, respectively.

Mask-repeat, Mask-postion, Mask-clip, Mask-origin, mask-size are not valid for <mask>element

4.2 Border Mask Properties at a glance

4.2.1mask-border-source

Grammar

Mask-border-source:none | <image>

Meaning

Sets the image of the border matte, none is the default value.

Similar to Border-image-source

4.2.2mask-border-mode

Grammar

Mask-border-mode:luminance | Alpha

Meaning

Sets the mode of the border matte, with Alpha as the default value.

Similar to Mask-mode

CSS3 Clipping and mask parsing