简介
clip-path 是 css 中可以创建出一个只显示元素部分区域的剪裁区域。剪裁区域内的部分显示，超出部分则隐藏。clip-path 是已经废弃的 clip 的代替属性。
基本属性
clip-sourcebasic-shapegeometry-boxnone
属性详解
1. clip-source
参考代码
clip-path: clip-source(url);
// 剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径
2. basic-shape
2.1 inset（矩形）
MDN 参考：
- 参数设置
inset( <shape-arg>{1,4} [round <border-radius>]? ) -
shape-arg的只按照从左到右的顺序，表示的是剪裁矩形距离 上，右，下，左的偏移量。和padding的设定相似，也可以指定 1 个值， 2 个值，3 个值和 4 个值。 -
round<border-radius>是个可选参数，表示的是剪裁矩形的圆角。
参考代码
// 4 个位置参数
clip-path: inset(10px 10px 20px 30px round 10px);
// 3 个位置参数
clip-path: inset(10px 10px 20px round 10px);
注意： 各个值之间没有逗号。而且指定圆角，必须写 round 4px
2.2 circle（圆形）
MDN 参考
- 参数设置
circle( [<shape-radius>]? [at <position>]? ) - 关于半径设置
-
shape-radius表示的是剪裁圆的半径，且不接受负数作为参数。 - 如果半径设置为百分比，则会以一下公式进行计算
sqrt(width^2+height^2)/sqrt(2) * 设置的百分数， 其中width与height为相关盒模型的宽与高。 - 如果不指定半径，则会以 width 和 height 中最短的长度作为圆的直径。
-
position表示的是圆心位置。如果不指定为当前元素盒模型的中心。
参考代码。 -
position表示的是圆心对于盒子左侧和顶部的偏移量。
// 此圆中心位于半图形中心，半径为 math.min(height, width)/2
clip-path: circle()
// 指定三个参数
clip-path: circle(10% at 10px 50px)
注意： 指定圆心时，圆心的位置必须是在 at 之后。
2.3 ellipse（椭圆）
MDN 参考
- 参数设置
ellipse( [<shape-radius>{2}]? [at <position>]? ) - 关于长轴和短轴设置
- rx 表示长轴，是第一个参数，默认值为盒子宽度的一半。
- ry 表示短轴，是第二个参数，默认值为盒子高度的一半。
- rx 和 ry 都不接受负值作为参数。
- rx 和 ry 的百分比的参照为盒子的width 和 height。
-
position和圆形的一致，代表椭圆的中心。
参考代码
clip-path: ellipse(10% 10% at 50% 50%)
2.4 polygon（多边形）
MDN 参考
- 参数设置
polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# ) - fill-rule 的设置规则
nonzero是 fill-rule 的默认值，用于判断某个点在剪裁图形的内部还是外部。
nonzero 的判断规则： 从一点做一条任意方向的射线，然后计算射线与多边形边的相交情况。从 0 开始统计，路径上每一条从左到右（顺时针）跨过射线的线段都会让结果加 1，每条从右向左（逆时针）跨过射线的线段都会让结果减 1。当统计结束后，如果结果为 0，则点在外部；如果结果不为 0，则点在内部。evenodd是 fill-rule 的另一个可选值，也是用于判断某个点在剪裁图形的内部还是外部。
evenodd 的判断规则：从该点向任意方向无限远处绘制射线，并统计这个形状所有的路径段中，与射线相交的路径段的数量。如果有奇数个路径段与射线相交，则点在内部；如果有偶数个，则点在外部。
-
shape-arg表示的是多边形定点的坐标。
参考代码
clip-path: polygon(evenodd, 10px 10px, 10px 30px, 30px 30px, 10px 30px)
实例参考：
- 实心星星与空心星星
- 实现星星
.a{
width: 100px;
height: 100px;
background: orange;
clip-path: polygon(50% 0, 21% 90%, 98% 35%, 2% 35%, 79% 90%);
}
示意图如下：
实心星星示意图
- 空心星星示意图
.a{
width: 100px;
height: 100px;
background: orange;
clip-path: polygon(evenodd, 50% 0, 21% 90%, 98% 35%, 2% 35%, 79% 90%);
}
空心星星示意图
从上面两个示意图中可以看出，evenodd 和 nonzero 在绘制同一种图形时，可能会呈现不同的样子。这主要取决于组成多边形的定点之间的连线方式。
