css clip-path 属性介绍

circle() – 圆

语法：circle( []? [at ]? )
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( [{2}]? [at ]? )
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( {1,4} [round ]? )

其中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：矩形的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); // 三角形 

path使用

大写字母(绝对坐标)

• M:起始坐标点 M坐标点1x 坐标点1y

• L:后续坐标点 L坐标点2x 坐标点2y L坐标点3x 坐标点3y …

• H:水平绘制 水平坐标点,只接受一个参数,因为它们只向一个方向移动。

• V:垂直绘制 竖直坐标点,只接受一个参数,因为它们只向一个方向移动。

• Z:线段闭合 放置位置之前的坐标点会首尾闭合

• C:三次贝塞尔曲线 前两个是控制点,最后一个是结束点

• S:三次贝塞尔曲线的简写 第一个是第二个控制点,最后一个是结束点
  当前面是C或S时,会根据前面的最后一个控制点,并从中推断出新的控制点

• Q:二次贝塞尔曲线 第一个是控制点,第二个是结束点

• T:二次贝塞尔曲线的简写 第一个是结束点
  适用于前面是Q或T命令的情况,如果不是,则假定控制点与前一个点相同,并且只会绘制线条。

• A:画弧线 水平方向半径 竖直方向半径 角度 0小弧/1大弧 0逆时针/1顺时针 终点x坐标 终点y坐标

  其中:
  半径，两个半径相同为圆弧且越小得到的圆弧越多,不同为椭圆弧
  角度为将图形旋转,圆旋转不变,椭圆旋转会改变，方向为起始坐标和终点坐标的连续,正顺负逆

  绘制扇形:
  外圈起点坐标和终点坐标y相同
  内圈起点坐标和y相同,且x，y坐标为中心坐标和外圈坐标的和的一半,若为等距圆，中间通过直线命令连接

小写(相对坐标,相对上次路径末尾坐标)

• m:在之前图案末尾点为坐标原点后的坐标点
• l:在之前图案末尾点为坐标原点后的坐标点
• h:水平相对长度 在之前图案末尾点的水平方向长度 正负与坐标轴相同
• v:垂直相对长度 在之前图案末尾点的垂直方向长度 正负与坐标轴相同