css clip-path 属性介绍

circle() – 圆

语法：circle( [<shape-radius>]? [at <position>]? )
shape-radius 圆的半径
position 圆的中心点位置

使用方法：

clip-path: circle(); // 以元素的中心点为圆的中心点，最小宽度一半为圆的半径。clip-path: circle(50%);  // 半径50%；clip-path: circle(at 50% 50%); // 中心点位置在x：50%，y：50%。clip-path: circle(50% at 50% 50%); // 半径50%；中心点位置在x：50%，y：50%。clip-path: circle(50px at 50px 50px); // 半径50px；中心点位置在x：50px，y：50px。

ellipse() – 椭圆

语法：ellipse( [<shape-radius>{2}]? [at <position>]? )
shape-radius 圆的x 轴半径
shape-radius 圆的y 轴半径
position 圆的中心点位置

使用方法：

clip-path:  ellipse(); clip-path: ellipse(50px 75px); // x轴半径为50px，y轴半径为75px；clip-path:  ellipse(at 50% 50%); // 圆心位置在50%， 50%；clip-path: ellipse(50px 75px at 50% 50%); // x轴半径为50px，y轴半径为75px；圆心位置在50%， 50%；

x，y半径除了具体数值，还支持farthest-side和closest-side这两个关键字，顾名思义，分别表示到最长边的长度和最短边的长度。

例如：

ellipse(farthest-side closest-side at 25% 25%)

表示在浮动元素25% 25%位置，以距离浮动元素最长边的距离作为椭圆的x坐标，以距离浮动元素边缘最短的距离作为椭圆的y坐标。

inset() – 内矩形（包括圆角矩形）

语法：inset( <shape-arg>{1,4} [round <border-radius>]? )

其中shape-arg是必须参数，可以是1~4个值。当提供所有前四个参数时，它们表示从参考框向内的顶部，右侧，底部和左侧偏移，也就是定义了插入的矩形的边缘位置。 这些参数遵循边距缩写的语法（类似margin、padding等属性），我们可以使用1个，2个，3个或4个值。border-radius表示圆角大小，可以缺省。除了4个偏移值，如果要指定圆角，必须带上round关键字。

因此，下面这些写法都是合法的：

shape-outside: inset(10px);shape-outside: inset(10px 20px);shape-outside: inset(10px 20px 30px);shape-outside: inset(10px 20px 30px 40px);shape-outside: inset(10px 20px 30px 40px round 10px);

下面都是有效的inset()函数声明。

inset(10% 20% round 5px);

一个带5像素圆角的矩形，上下2条边向内10%，左右2条边向内20%

inset(15px 20px 30px);
inset(25% round 10px 30px);
inset(10px 20px 30px 40px round 10px); 

polygon() – 多边形

语法：polygon((<x> <y>)!)
x：矩形的x周坐标
y：矩形的y周坐标
polygon(x y, x y, x y); 可以有多组坐标，一组坐标以，号分割，坐标之间以空格分割

使用方法：

clip-path:polygon(0 0, 100% 100%, 0 100%); // 三角形clip-path:polygon(0 0, 100% 100%, 0 100%); // 三角形clip-path:polygon(50px 0px, 100px 100px, 0px 100px); // 三角形