一、核心概念：什么是 clip-path？
clip-path 是 CSS 中的一个属性，用于裁剪元素的可视区域 ------ 只显示裁剪区域内的部分，区域外的部分会被隐藏（不是删除，只是不可见）。它替代了老旧的 clip 属性，功能更强大、语法更灵活，支持各种自定义形状。
简单比喻：把元素想象成一张完整的纸，clip-path 就像一把剪刀，你可以用它剪出圆形、三角形、多边形甚至不规则形状，只保留剪出来的部分。
二、基本语法
css
/* 通用语法 */
clip-path: none | <clip-source> | <basic-shape>
/*
none：默认值，不裁剪，显示整个元素。
<clip-source>：引用 SVG 的 <clipPath> 元素（适用于复杂自定义形状）。
<basic-shape>：使用内置的形状函数创建裁剪区域。
*/三、常用的 <basic-shape> 形状函数
所有形状函数的坐标默认基于元素的盒模型（content + padding + border），坐标原点在元素左上角（0,0），向右为 x 轴正方向，向下为 y 轴正方向。
1. 矩形：inset ()
用于裁剪出矩形（含圆角矩形），语法：
css
clip-path: inset(10px 20px 30px 40px round 5px);
/*
inset(上 右 下 左 round 圆角) 顺序可选：top right bottom left / top-bottom left-right
前 4 个值：裁剪后矩形与原元素四边的距离（可类比 margin）；
round 后的值：裁剪矩形的圆角（可选）。
*/
/* 示例 */
.box {
width: 200px;
height: 200px;
background: #42b983;
/* 上下裁剪10px，左右裁剪20px，圆角15px */
clip-path: inset(10px 20px round 15px);
}
2. 圆形：circle ()
用于裁剪出圆形，语法：
css
clip-path: circle(50% at 50% 50%);
/*
circle(半径 at 圆心坐标)
半径：可以是具体像素（50px）、百分比（50%，基于元素宽高的最小值），也可以用 closest-side/farthest-side（默认 closest-side）；
at x y：圆心位置，默认 50% 50%（元素中心）。
*/
/* 示例 */
.box {
width: 200px;
height: 200px;
background: #42b983;
/* 半径80px，圆心在元素中心 */
clip-path: circle(80px at center);
}
3. 椭圆：ellipse ()
用于裁剪出椭圆，语法：
css
clip-path: ellipse(60px 40px at 50% 50%);
/*
ellipse(水平半径 垂直半径 at 圆心坐标)
水平半径：沿 x 轴的半径；
垂直半径：沿 y 轴的半径；
同样支持 closest-side/farthest-side，默认 closest-side closest-side。
*/
/* 示例 */
.box {
width: 200px;
height: 200px;
background: #42b983;
/* 水平半径70px，垂直半径40px，注意：圆心在右侧1/3处 */
clip-path: ellipse(70px 40px at 33% 50%);
/* 水平半径70px，垂直半径40px，圆心在右侧50%处 */
clip-path: ellipse(70px 40px at 50% 50%);
}
4. 多边形：polygon ()
最灵活的形状，通过坐标点拼接成任意多边形，语法：
css
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
/*
polygon(坐标点1, 坐标点2, 坐标点3, ...)，坐标用 x y 表示
每个坐标点用空格分隔，点之间用逗号分隔；
坐标可以是像素、百分比，按顺序连接成闭合图形。
*/
/* 示例 */
/* 三角形（顶部） */
.triangle {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
/* 五角星（核心坐标：50%0%, 61%35%, 98%35%, 68%57%, 79%91%, 50%70%, 21%91%, 32%57%, 2%35%, 39%35%） */
.star {
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
四、进阶用法
1. 结合动画 / 过渡
clip-path 支持 CSS 过渡（transition）和动画（@keyframes），可以实现形状渐变的效果：
css
.box {
width: 200px;
height: 200px;
background: #42b983;
clip-path: circle(50% at center);
transition: clip-path 0.5s ease;
}
.box:hover {
/* 鼠标悬浮时变成矩形 */
clip-path: inset(0 round 10px);
}2. 引用 SVG 裁剪（clip-source）
对于极复杂的形状（如不规则曲线），可以用 SVG 定义 <clipPath>，再通过 url() 引用：
html
<!-- 定义裁剪形状（使用 iconfont 的 SVG 路径） -->
<svg width="0" height="0" viewBox="0 0 1024 1024">
<clipPath id="icon-clip">
<path d="M245.398721 481.855788c45.182448 0 81.82968-36.602073 81.82968-81.78452l0-163.614201c0-45.182448-36.647233-81.8071-81.82968-81.8071-45.159868 0-81.78452 36.624653-81.78452 81.8071l0 163.614201C163.614201 445.276295 200.216273 481.855788 245.398721 481.855788L245.398721 481.855788zM511.254862 809.08419c-217.806042 0-408.154884-97.206615-511.254862-242.056891l0 163.636781c103.122558 144.782536 293.44882 242.011731 511.254862 242.011731 217.783462 0 408.132304-97.229195 511.232282-242.011731l0-163.636781C919.409746 711.854994 729.060904 809.08419 511.254862 809.08419L511.254862 809.08419zM777.133583 481.855788c45.159868 0 81.78452-36.602073 81.78452-81.78452l0-163.614201c0-45.182448-36.624653-81.8071-81.78452-81.8071-45.205028 0-81.82968 36.624653-81.82968 81.8071l0 163.614201C695.303903 445.276295 731.928556 481.855788 777.133583 481.855788L777.133583 481.855788zM777.133583 481.855788"></path>
</clipPath>
</svg>
<!-- 应用裁剪：元素变成图标形状 -->
<div class="box"></div>
<!-- 样式 -->
<style>
.box {
width: 1024px; /* 和SVG viewBox尺寸匹配 */
height: 1024px;
background: #42b983; /* 绿色背景，方便观察 */
margin: 50px auto; /* 居中显示 */
clip-path: url(#icon-clip); /*绑定svg*/
transform: scale(0.2); /*缩放*/
transform-origin: center; /* 居中缩放 */
}
</style>
五、兼容性与注意事项
- 兼容性：现代浏览器（Chrome、Firefox、Safari 12+、Edge）均支持，IE 完全不支持；
- 裁剪区域外的元素：不会触发鼠标事件（如点击、悬浮），因为可视区域外的部分被 "隐藏" 了；
- 背景 / 边框：裁剪会作用于元素的所有内容（包括背景、边框、内容、阴影等）；
- 百分比参考：
circle/ellipse的百分比基于元素宽高，polygon的百分比基于元素自身的宽高。