clip-path 能裁出不规则形状的只有 polygon() 和 path()：前者用坐标点定义多边形（如星形、锯齿边），后者用 SVG 路径语法支持贝塞尔曲线，但 path() 在 Safari 16.4+ 才稳定支持。
clip-path 能裁出哪些不规则形状
直接说结论：clip-path 支持 inset()、circle()、ellipse()、polygon() 和 path() 五种基础函数，其中真正能做「不规则」裁剪的是 polygon() 和 path()。前者适合多边形（比如星形、锯齿边），后者支持 SVG 路径语法，可精确控制贝塞尔曲线——但浏览器兼容性差些（path() 在 Safari 16.4+ 才稳定支持）。
常见误判是以为 clip-path: circle(50% at 50% 50%) 算“不规则”，其实它是规则图形；真要切一个撕纸效果、波浪底边或对话气泡尾巴，必须用 polygon() 列点坐标，或用 path() 写 SVG 指令。
用 polygon() 写多边形裁剪的实操要点
polygon() 的参数是一组空格分隔的坐标对，格式为 x y，单位可以是 %、px 或 vw，但强烈建议统一用 % 保证响应式适配。
- 坐标系原点在元素左上角，
0% 0%是左上顶点，100% 100%是右下顶点 - 至少需要 3 个点才能构成封闭区域，少于 3 点无效（浏览器会忽略整个声明）
- 点顺序影响渲染：顺时针或逆时针都行，但交叉路径可能导致意外镂空（比如画了个自相交五角星，中间可能被裁掉）
- 示例：底部带三角缺口的卡片 ——
clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 75% 100%, 50% 85%, 25% 100%, 0% 85%)
clip-path 的兼容性与 fallback 方案
Chrome/Firefox/Edge 基本全支持 polygon()，但旧版 Safari（≤15.6）对百分比坐标解析有 bug，比如 50% 50% 可能被当成 50px 50px；Safari 16.4+ 才完整支持 path()。
- 检查是否生效：打开 DevTools → Elements 面板 → 找到对应元素 → 看
clip-path是否被划掉（strikethrough）或标为 invalid - 无 JS 的降级方案：用
@supports (clip-path: polygon(0 0))包裹样式，老浏览器自动跳过 - 不能降级为背景图模拟：因为
clip-path裁的是整个盒模型（含 border、box-shadow），而背景图只能覆盖 content 区域 - 慎用
clip-path动画：在大量元素上做clip-path连续变化（比如波浪滚动）会导致重绘开销飙升，FPS 明显下降
为什么 clip-path 有时裁不掉 box-shadow 或 border
这是最常踩的坑：clip-path 默认只裁剪元素的「绘制区域」，而 box-shadow 和 border 属于「绘制层外溢出」，部分浏览器（尤其是 Safari）不会自动裁掉它们。
- 解决办法一：给元素加
isolation: isolate，强制创建独立层叠上下文，让裁剪作用域包含阴影和边框 - 解决办法二：改用
filter: drop-shadow()替代box-shadow，它受clip-path影响（但注意drop-shadow不支持内阴影） - 解决办法三：把 border 拆成伪元素实现，例如用
::after绘制一个稍大的polygon()边框，再用主元素裁剪内容 - 验证是否成功：截图后用像素编辑器查看边缘，确认阴影/边框尖角是否被干净截断
实际项目里，polygon() 坐标调试成本高，建议先用在线工具（如 https://bennettfeely.com/clippy/）生成初稿，再粘贴进代码微调；path() 虽灵活，但手写 SVG 指令容易漏掉空格或逗号，导致整个声明失效——这种错误在 DevTools 里不报错，只静默忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
