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); // 三角形
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:垂直相对长度 在之前图案末尾点的垂直方向长度 正负与坐标轴相同