CSS3 之剪裁

简介

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

基本属性

• clip-source
• basic-shape
• geometry-box
• none

属性详解

1. clip-source

参考代码

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

2. basic-shape

2.1 inset（矩形）
MDN 参考：

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

1. 参数设置 circle( []? [at ]? )
2. 关于半径设置

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

3. position 表示的是圆心位置。如果不指定为当前元素盒模型的中心。
   参考代码。
4. position 表示的是圆心对于盒子左侧和顶部的偏移量。

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

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

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

2.3 ellipse（椭圆）
MDN 参考

1. 参数设置 ellipse( [{2}]? [at ]? )
2. 关于长轴和短轴设置

• rx 表示长轴，是第一个参数，默认值为盒子宽度的一半。
• ry 表示短轴，是第二个参数，默认值为盒子高度的一半。
• rx 和 ry 都不接受负值作为参数。
• rx 和 ry 的百分比的参照为盒子的width 和 height。

3. position 和圆形的一致，代表椭圆的中心。
   参考代码

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

2.4 polygon（多边形）
MDN 参考

1. 参数设置 polygon( [,]? [ ]# )
2. fill-rule 的设置规则

• nonzero 是 fill-rule 的默认值，用于判断某个点在剪裁图形的内部还是外部。
  nonzero 的判断规则： 从一点做一条任意方向的射线，然后计算射线与多边形边的相交情况。从 0 开始统计，路径上每一条从左到右（顺时针）跨过射线的线段都会让结果加 1，每条从右向左（逆时针）跨过射线的线段都会让结果减 1。当统计结束后，如果结果为 0，则点在外部；如果结果不为 0，则点在内部。

• evenodd 是 fill-rule 的另一个可选值，也是用于判断某个点在剪裁图形的内部还是外部。
  evenodd 的判断规则：从该点向任意方向无限远处绘制射线，并统计这个形状所有的路径段中，与射线相交的路径段的数量。如果有奇数个路径段与射线相交，则点在内部；如果有偶数个，则点在外部。

3. shape-arg 表示的是多边形定点的坐标。
   参考代码

clip-path: polygon(evenodd, 10px 10px, 10px 30px, 30px 30px, 10px 30px)

实例参考：

1. 实心星星与空心星星

• 实现星星

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