clip-path 支持 inset()、circle()、ellipse()、polygon() 和 path() 五种裁切图形，其中 polygon() 适合顶点明确的多边形（如正六边形），path() 借助贝塞尔曲线实现圆滑形状（如心形），但 Firefox 需 -webkit- 前缀且不支持 arc 指令；二者均非绘图工具，仅裁切元素矩形区域。
clip-path 能画出哪些“图形”，和 SVG path 有什么区别
clip-path 不是绘图工具，它只做裁切——把元素原本的矩形区域按指定形状“抠”出一个透明洞，背后内容透出来。能实现的图形取决于你给的路径描述，inset()、circle()、ellipse()、polygon() 和 path() 这五种函数里，真正支持复杂几何（比如星形、心形、不规则多边形）的是 polygon() 和 path()。
polygon() 适合顶点明确、坐标可数的图形，比如六边形、平行四边形、锯齿边框；path() 支持贝塞尔曲线，才能做出圆滑过渡的形状（如花瓣、流线型徽标）。但注意：path() 在 Firefox 中需要加 -webkit- 前缀才能生效，且不支持 CSS 变量插值，路径字符串必须硬编码或用 JS 动态写入。
用 polygon() 绘制六边形：坐标怎么算才不歪
六边形看似简单，但直接手写六个点容易因角度偏差导致上下不对称或边不等长。最稳的方式是用单位圆坐标生成：6 个点均匀分布在 360° 上，起始角建议设为 -30°（让顶部朝上），再乘以半径。
- 假设容器宽高都是 200px，想居中绘制边长为 100 的正六边形，可用这组坐标：
polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) - 不要用像素值写死坐标（如
100px 0px），否则响应式失效；百分比基于元素自身宽高，更可控 - 如果发现六边形被“压扁”，检查父容器是否设置了
aspect-ratio或图片/内容拉伸了高度——polygon()坐标是相对于盒模型的，不是视口
path() 画心形时，Chrome 显示正常但 Firefox 不显示
这是最常见的兼容性坑：clip-path: path("M...") 在 Chrome/Edge 里原生支持，Firefox 目前只认 -webkit-clip-path 前缀版本，而且必须同时提供两个声明，否则 Firefox 彻底忽略。
立即学习“前端免费学习笔记（深入）”；
正确写法是：
element {
clip-path: path('M 50 100 C 20 80, 20 40, 50 20 C 80 40, 80 80, 50 100 Z');
-webkit-clip-path: path('M 50 100 C 20 80, 20 40, 50 20 C 80 40, 80 80, 50 100 Z');
}
另外注意三点：
- 路径字符串里的空格和逗号不能省，
C 20 80,20 40（逗号后没空格）在部分浏览器会解析失败 - 数值单位统一用无单位数字（默认是用户坐标系，1 单位 = 1px），别混用
px或% - Firefox 不支持
path()中的arc指令（A），要用贝塞尔曲线模拟圆弧
性能差、动画卡顿？clip-path 不是万能裁刀
clip-path 是合成层操作，但每次重绘都会触发 Layout + Paint，尤其当路径点数 > 20 或配合 transform 动画时，GPU 负担明显上升。真实项目中，以下情况要警惕：
- 对
img或大尺寸video元素频繁使用path()裁切，滚动时掉帧严重——优先考虑用 SVG<clippath></clippath>定义后复用 - 用
@keyframes动画clip-path，Chrome 从 v115 开始支持polygon()关键帧插值，但path()仍不支持逐点动画，强行写只会跳变 - 服务端渲染（SSR）页面里用 JS 注入
clip-path，可能造成水合 mismatch——把裁切逻辑移到 CSS 类里，用 class 切换更稳妥
复杂图形最终往往绕不开 SVG，clip-path 适合轻量、静态、需快速原型验证的场景；真要兼顾精度、动画、SEO，还是得回到 <svg></svg> + <clippath></clippath> 的组合里去调参。
