clip-path 浏览器兼容性差异显著：Firefox 不支持 path()，polygon() 语法校验极严；绝对定位元素需父容器触发层叠上下文；裁剪同步影响视觉与事件区域，需拆层或改用 mask-image。
clip-path 在 Chrome、Safari、Firefox 渲染不一致，不是你写错了，是浏览器能力断层和解析规则根本不同——没有“统一写法”能绕过这个现实。
Firefox 完全不支持 clip-path: path()，别试前缀也别加 @supports 检测
Firefox 至今未实现 clip-path: path()，哪怕你写 -webkit-clip-path: path("M0,0 L100,0") 或双写声明，它都会静默忽略整条规则。查证方法：打开 DevTools → Elements 面板，看该样式是否被划掉或压根不出现在 computed 样式里。这不是兼容性开关问题，是引擎级缺失。如果你的项目必须覆盖 Firefox，path() 必须降级为 SVG <clipPath> 引用，例如 clip-path: url(#fallback)，且 <clipPath> 必须内联在 HTML 中（不能外链），ID 全局唯一。
polygon() 在 Firefox 中生效但极其脆弱，单位和空格错一个就失效
Firefox 支持 polygon()，但语法校验极严：任何单位混用（比如 0%0% 缺空格）、逗号后多空格、漏括号、用 px（如 50px 50px），都会导致整条声明被丢弃，且无控制台报错。✅ 正确写法：polygon(0% 0%, 100% 0%, 100% 50%, 50% 100%, 0% 50%)；❌ 失效写法：polygon(0%0%, 100%0%, )（缺空格）、polygon(0px 0px, )（px 不被识别）。注意：百分比基于元素 content box 实际宽高，若父容器有 aspect-ratio 或图片被 object-fit 拉伸，图形会变形。
绝对定位元素上 clip-path 失效，大概率是父容器没建新层叠上下文
position: absolute 或 fixed 元素加了 clip-path 却没效果，常见原因是父容器既没设 overflow: hidden，也没触发新层叠上下文。Firefox 尤其敏感——它默认只对标准绘制上下文裁剪，脱离文档流的元素需显式约束。解决办法只有两个：overflow: hidden（最稳）或 transform: translateZ(0)（兼容旧版 Safari）。别指望 z-index 或 will-change 修复，它们和裁剪作用域无关。另外，clip-path 的坐标系始终以自身 content box 为基准，padding 和 border 会影响实际可视区域，务必设 box-sizing: border-box。
立即学习“前端免费学习笔记（深入）”；
点击区域跟着裁剪一起消失，这不是 bug，是规范行为
clip-path 同步裁剪视觉与事件响应区域，Chrome/Firefox/Safari 行为完全一致：裁剪外的像素无法响应 hover/click/focus。想保留全区域可点，不能靠 pointer-events（设成 all 或 visible 无效），得拆层：clip-path 移到子元素（如 <img>），父容器保持完整可点击；或改用 mask-image（仅影响视觉，不干扰事件，Chrome 75+、Safari 15.4+ 支持）；复杂交互区域（如气泡箭头）建议放弃 clip-path，用 overflow: hidden + 绝对定位伪元素模拟形状。iOS Safari 和 Android WebView 对事件裁剪处理更不稳定，拆层方案在这里不是优化，是刚需。
