CSS3 之剪裁

clip-path 是 css 中可以创建出一个只显示元素部分区域的剪裁区域。剪裁区域内的部分显示，超出部分则隐藏。clip-path 是已经废弃的 clip 的代替属性。

参考代码

clip-path: clip-source(url);
// 剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径

2.1 inset（矩形）
MDN 参考：

参数设置 inset( {1,4} [round ]? )
shape-arg 的只按照从左到右的顺序，表示的是剪裁矩形距离上，右，下，左的偏移量。和 padding 的设定相似，也可以指定 1 个值， 2 个值，3 个值和 4 个值。
round 是个可选参数，表示的是剪裁矩形的圆角。
参考代码

// 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 参考

shape-radius 表示的是剪裁圆的半径，且不接受负数作为参数。
如果半径设置为百分比，则会以一下公式进行计算 sqrt(width^2+height^2)/sqrt(2) * 设置的百分数，其中width与height为相关盒模型的宽与高。
如果不指定半径，则会以 width 和 height 中最短的长度作为圆的直径。

// 此圆中心位于半图形中心，半径为 math.min(height, width)/2
clip-path: circle()

// 指定三个参数
clip-path: circle(10% at 10px 50px)

注意： 指定圆心时，圆心的位置必须是在 at 之后。

2.3 ellipse（椭圆）
MDN 参考

clip-path: ellipse(10% 10% at 50% 50%)

2.4 polygon（多边形）
MDN 参考

nonzero 是 fill-rule 的默认值，用于判断某个点在剪裁图形的内部还是外部。
nonzero 的判断规则： 从一点做一条任意方向的射线，然后计算射线与多边形边的相交情况。从 0 开始统计，路径上每一条从左到右（顺时针）跨过射线的线段都会让结果加 1，每条从右向左（逆时针）跨过射线的线段都会让结果减 1。当统计结束后，如果结果为 0，则点在外部；如果结果不为 0，则点在内部。
evenodd 是 fill-rule 的另一个可选值，也是用于判断某个点在剪裁图形的内部还是外部。
evenodd 的判断规则：从该点向任意方向无限远处绘制射线，并统计这个形状所有的路径段中，与射线相交的路径段的数量。如果有奇数个路径段与射线相交，则点在内部；如果有偶数个，则点在外部。

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 在绘制同一种图形时，可能会呈现不同的样子。这主要取决于组成多边形的定点之间的连线方式。