CSS曾经存在 clip 剪裁属性，功能极弱，仅能对 absolute 和 fixed 定位的元素进行有限的裁剪操作，于是 clip 属性被废弃，小妹妹 clip-path 闪亮登场。本文就简单聊聊 clip-path，算是对我们在不同场景多次使用过的属性做一次小结。
裁缝在动剪子之前，就已胸有成“衣”，在衣服还是一块布料的时候心中早有了终端产品的样纸。clip-path 小姑凉也练就了这个本事：通过基本图形（basic-shape）模式对目标元素（布料）进行剪裁。下面逐一介绍各种基本图形模式——它们实际上就是CSS剪裁函数：
一、inset（矩形）
inset() 函数定义一个矩形，这个矩形就是裁剪之后最终呈现出来的样子。语法举例：
clip-path: inset(10px 20px 30px 40px round 10px);
这表示，元素的上边、右边、下边、左边分别裁掉10px、20px、30px、40px，并且，裁剪出来的成品圆角半径为10px。圆角半径必须由 round 关键词带出，圆角参数可选，意思是，是否设置 round 参数，依据的是是否需要圆角效果。另外需要注意的是，参数尺寸除使用像素单位外，还支持其他实体和百分比单位。
如果上右下左四个方向裁掉的尺寸一致，比如都是15px，上述语句可以写成：
clip-path: inset(15px round 10px);
如果不需要圆角，则写成：
clip-path: inset(15px);
实例：对 class="mama" 的 div 的两个伪元素进行操作，伪元素尺寸和宿主一致，粉红色伪元素裁掉0px并设置圆角半径10px，淡蓝色伪元素剪掉15px、不设置圆角：
<style>
.mama {
position: relative;
margin: 20px;
width: 400px;
height: 200px;
border: 1px solid gray;
}
.mama::before, .mama::after {
position: absolute;
content: '';
width: 100%;
height: 100%;
background: pink;
clip-path: inset(0 round 20px);
}
.mama::after {
background: lightblue;
clip-path: inset(15px);
}
</style>
<div class="mama"></div>
二、circle（圆形）
circle()函数用于定义圆形，亦即，裁出来的效果是个圆形。共两个参数，一个是剪裁成品的半径（必须），一个是圆心位置坐标（可选，默认是元素中心），由关键词 at 带出。语法举例如下：
clip-path: circle(100px at 25% 50%);
这表示，裁剪出来的圆半径为 100px，圆心在元素坐标系的 {25%,50%} 处。半径单位使用百分比时，参照元素的宽高尺寸用勾股定理计算实际尺寸。
下面给出的实例，mama的两个伪元素一个裁成80px半径、圆心在 {25%,50%} 处，另一个半径为100px、圆心位置缺省（元素的中心）：
.mama::after {
background: lightblue;
clip-path: inset(15px);
}
.mama:nth-of-type(2)::before {
clip-path: circle(80px at 25% 50%);
}
.mama:nth-of-type(2)::after {
clip-path: circle(100px);
}
三、ellipse（椭圆形）
ellipse()函数用于定义椭圆形，就是，裁剪出来的效果是一个椭圆形。需要两个参数，一是椭圆的两个半径（必须），二是椭圆的位置（可选）。和对圆的操作大同小异。语法举例：
clip-path: ellipse(100px 60px at 30% 50%);
这意味着，椭圆的中心处在元素的 {30%,50%} 处，椭圆XY半径依次为 100px 60px。试看如下实例，我们仍然利用伪元素操刀，剪出两个椭圆：
.mama:nth-of-type(3)::before {
clip-path: ellipse(100px 60px at 30% 50%);
}
.mama:nth-of-type(3)::after {
clip-path: ellipse(60px 80px at 75% 50%);
}
四、polygon（多边形）
polygon()函数用于定义一个多边形，亦即，操刀之后，得出的是个多边形效果。多边形至少需要三个边，用点坐标的方式定义每条边线段两端的位置，两个点坐标之间建议用逗号隔开；它会自闭合，回到原点时的点坐标可以省略。语法举例：
clip-path: polygon(0 50%,50% 0,100% 50%,50% 100%);
这表明我们剪出了一个菱形。下面给出的实例，第一个伪元素我们用上面的代码剪出一个菱形，第二个伪元素我们剪成一个小矩形：
.mama:nth-of-type(4)::before {
clip-path: polygon(0 50%,50% 0,100% 50%,50% 100%);
}
.mama:nth-of-type(4)::after {
clip-path: polygon(25% 25%,75% 25%,75% 75%,25% 75%);
}
同样的，各点坐标值可以使用像素单位。
五、path（路径）
path()函数使用指定路径剪裁效果，参数就是规范的svg闭合路径。语法举例，注意路径放在括号里，路径字符串要用小角引号：
clip-path: path('M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z');
这将剪出一个心形效果。下面的实例，我们利用两个伪元素分别剪出一个心形和一个星形效果：
.mama:nth-of-type(5)::before {
clip-path: path('m102.41522,53.42835c34.42664,-94.50406 169.31135,0 0,121.50522c-169.31135,-121.50522 -34.42664,-216.00929 0,-121.50522z');
}
.mama:nth-of-type(5)::after {
clip-path: path('m220.64504,98.88681l63.02483,0l19.47516,-63.02457l19.47517,63.02457l63.02482,0l-50.98807,38.95088l19.47617,63.02457l-50.98809,-38.95194l-50.98808,38.95194l19.47617,-63.02457l-50.98808,-38.95088z');
}
clip-path: path('...') 会被少量编辑器判为语法错误，但这个语句的确是mdn推荐的标准表达式。故此，如果报错，可以理解为是编辑器的语法检测库跟不上形势的发展。path('..') 其实是语法糖，它是 clip-source 引用的简化，clip-source 引用需要一个svg元素制作路径，然后通过路径的id对路径进行引用，有兴趣的朋友可以自行网补。
发表于 2024-1-11 12:20
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2024-1-11 16:37
发表于 2024-1-11 16:44
楼主
