老旧浏览器不支持polygon()，会静默忽略整条声明；唯一可靠fallback是内联SVG+url()引用，需设clipPathUnits="objectBoundingBox"、ID不含点号、坐标用0–1小数。
老旧浏览器根本不支持 polygon()，别白费劲加前缀
Chrome 62 以下、EdgeHTML ≤18、iOS Safari 12.2 以前的版本，clip-path: polygon() 会静默失效——不是报错，而是直接忽略整条声明。加 -webkit-clip-path 也无效，这些引擎压根没实现该语法解析逻辑。你看到元素“没被裁”，不是代码写错了，是浏览器根本读不懂。
验证方法很简单：打开 DevTools → Elements 面板 → 找到对应元素 → 看 clip-path 是否被划掉（strikethrough）或标为 invalid。如果是，说明当前环境不认这个值。
- Firefox 47 以前只支持
url()，且需手动开启layout.css.clip-path-shapes.enabled - IE 完全不支持任何
clip-path形状函数，url()也不行 - Android WebView 75–96 内核基本等同于旧 Chrome，
polygon()不可用
用内联 SVG + url() 是唯一可靠 fallback 方案
必须把 <svg></svg> 写在 HTML 文档内（不能外链），定义 <clippath></clippath>，再通过 clip-path: url(#id) 引用。这是所有兼容场景中唯一能跨浏览器稳定工作的路径裁剪方式。
关键约束有三个：clipPath 必须设 clipPathUnits="objectBoundingBox"（否则缩放失准），ID 名不能含点号或斜杠（如 #avatar.clip 要改成 #avatar_clip），<path></path> 的 d 值坐标必须用 0–1 小数（比如 M0,0 L1,0 L1,1 Z），不能混用 px 或 %。
立即学习“前端免费学习笔记（深入）”；
示例结构：
<svg width="0" height="0" style="position: absolute">
<defs>
<clipPath id="notch" clipPathUnits="objectBoundingBox">
<path d="M0,0 L1,0 L1,.85 L.75,1 L.5,.85 L.25,1 L0,.85 Z"/>
</clipPath>
</defs>
</svg>
CSS 中写：clip-path: url(#notch);
降级策略要分层，不能一刀切回 border-radius
如果目标是“底部带缺口的卡片”，border-radius 无法模拟；如果只是“圆形头像”，border-radius: 50% 就足够，IE9+ 全支持且零性能开销。真正需要路径裁剪的场景（如对话气泡、撕纸边缘、不规则徽章），必须按能力分层处理：
- 支持
@supports (clip-path: polygon(0 0))：启用polygon()写法 - 支持
url()但不支持polygon()（如旧 Firefox）：走内联 SVG fallback - 完全不支持
clip-path（如 IE）：用::before/::after+border技巧模拟简单形状，或直接放弃视觉特效，保内容可读
注意：background-image 无法替代 clip-path，因为后者裁的是整个盒模型（含 border、box-shadow），而背景图只覆盖 content 区域。
移动端 Safari 15.4 之前叠加 backdrop-filter 必崩
即使你用了内联 SVG fallback，在 iOS 15.4 之前的 Safari 上，只要同时设置了 backdrop-filter 和 clip-path: url(#id)，渲染就会异常（常表现为黑块或空白）。这不是 bug，是 WebKit 渲染管线的已知限制。
解决办法只有两个：
- 彻底禁用
backdrop-filter，改用半透明白色伪元素遮罩（background: rgba(255,255,255,.8)）模拟毛玻璃感 - 对 iOS clip-path 或降级为
inset()
这类组合失效很难调试——DevTools 里看不出报错，元素样式也显示正常，但视觉就是不对。最容易被忽略的是：它只在真机上复现，模拟器和桌面 Safari 都可能表现正常。
