clip-path 的使用

发表于 css3 分类,标签:

Clipping Shape: the clip-path property

Name:clip-path
Value:<clip-source> | [ <basic-shape> || <geometry-box> ] | none
Initial:none
Applies to:All elements. In SVG, it applies to container elements excluding the <defs> element and all graphics elements
Inherited:no
Media:visual
Computed value:as specified, but with <url> values made absolute
Percentages:as specified
Animatable:as specified for <basic-shape> [CSS-SHAPES], otherwise no

Specifies a basic shape or references a clipPath element to create a clipping path.

<clip-source>= <url>
<geometry-box>= <shape-box> | fill-box | stroke-box | view-box

For SVG elements without associated CSS layout box, the used value for content-boxpadding-boxborder-box and margin-box is fill-box.

For elements with associated CSS layout box, the used value for fill-boxstroke-box and view-box is border-box.

A computed value of other than none results in the creation of a stacking context [CSS21] the same way that CSS opacity [CSS3COLOR] does for values other than 1.

If the URI reference is not valid (e.g it points to an object that doesn’t exist or the object is not a clipPath element), no clipping is applied.

This example demonstrates the use of the basic shape <polygon()> as clipping path. Each space separated length pair represents one point of the polygon. The visualized clipping path can be seen in the introduction.

clip-path: polygon(15px 99px, 30px 87px, 65px 99px, 85px 55px,
122px 57px, 184px 73px, 198px 105px, 199px 150px,
145px 159px, 155px 139px, 126px 120px, 112px 138px,
80px 128px, 39px 126px, 24px 104px);

In this example, the clip-path property references an SVG clipPath element. Each comma separated length pair represents one point of the polygon. As for the previous example, the visualized clipping path can be seen in the introduction.

clip-path: url("#clip1");
<clipPath id="clip1">
    <polygon points="15,99 30,87 65,99 85,55 122,57 184,73 198,105
      199,150 145,159 155,139 126,120 112,138 80,128 39,126
      24,104"/>
</clipPath>


原文地址:   https://www.w3.org/TR/css-masking/#the-clip-path  

文档解释比较好的地址: https://www.cnblogs.com/pizitai/p/6188346.html  

        https://bashooka.com/coding/18-css-clip-path-tutorials-examples-tools/  

0 篇评论

发表我的评论