CSS clip-path 语法
在 CSS 中，clip-path 属性用于定义元素的裁剪路径，从而控制元素的显示区域。其中，任何超出裁剪路径的部分都将被隐藏。
语法：
clip-path: none | 函数;说明：
none 表示不裁剪，显示全部内容。clip-path 属性是通过不同的 CSS 函数 来定义裁剪区域的，常用的函数如下表所示。
| 函数 | 说明 |
|---|---|
| circle() | 裁剪为圆形 |
| ellipse() | 裁剪为椭圆 |
| polygon() | 裁剪为多边形 |
| path() | 使用 SVG 路径裁剪 |
| inset() | 向内裁剪，并支持圆角 |
注意:
- clip-path 适用于所有元素（包括行内元素）。注意，它会创建一个新的层叠上下文（Stacking Context）。
- clip-path 属性会裁剪元素的内容、背景、边框、阴影等一切视觉内容。
- clip-path 剪裁掉的部分不可见，但不会响应鼠标事件（比如点击、悬停等）。
CSS clip-path 摘要
| 属于 | CSS 裁剪属性 |
|---|---|
| 使用频率 | 中 |
| 是否继承 | 否 |
| 默认值 | none |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS clip-path 示例
接下来，我们通过几个简单的例子来讲解一下 clip-path 属性是如何使用的。
示例 1：clip-path: circle() 裁剪圆形
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
background-color: lightskyblue;
clip-path: circle(50% at 50% 50%);
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
clip-path: circle(50% at 50% 50%);对于上面这句代码，circle() 表示裁剪形状为 “圆形”，第一个 50% 指的是圆的半径（相对于元素的宽）。at 50% 50%; 表示圆心位于元素宽度（x 坐标）和高度（y 坐标）的 50% 处，即元素正中心。
示例 2：clip-path: polygon() 裁剪三角形
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
background-color: coral;
clip-path: polygon(50% 0, 0 100%, 100% 100%);
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
clip-path: polygon(x1 y1, x2 y2, x3 y3, ...);polygon()：指定一个多边形裁剪形状，通过一系列坐标点定义。
坐标点：每个点由 x y 坐标组成，表示多边形的顶点，坐标可以是百分比（如 50%）或绝对单位（如 px）。
连接规则：坐标点按顺序连接形成闭合多边形，起点自动连接到终点。
clip-path: polygon(50% 0, 0 100%, 100% 100%);polygon() 通过三个坐标点 (50% 0, 0 100%, 100% 100%) 定义一个三角形裁剪区域。只有三角形内的内容可见，三角形外的内容被隐藏。
示例 3：clip-path 结合 SVG 实现复杂裁剪
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 200px;
height: 200px;
background-color: hotpink;
clip-path: url(#starClip);
}
</style>
</head>
<body>
<svg width="0" height="0">
<defs>
<clipPath id="starClip">
<path d="M100,10 L120,80 L190,80 L130,120 L150,190 L100,150 L50,190 L70,120 L10,80 L80,80 Z">
</clipPath>
</defs>
</svg>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，首先创建一个 200 x 200 像素的粉红色方形（div）。然后使用 SVG 定义一个星形裁剪路径（clipPath），通过 path 绘制十个点的星形。
最后，将星形裁剪路径应用于 div，使 div 的显示区域被裁剪成星形，只显示星形内的粉红色内容。
