firefox完全不支持clip-path:path()，需用svg clippath fallback；polygon()虽支持但语法严格，须全用%单位且闭合，否则静默失效；渲染上下文缺失（如父容器无overflow:hidden）也会导致裁剪不生效。
Firefox 完全不支持 clip-path: path()，别白费力气加前缀
Firefox 至今未实现 clip-path: path()，哪怕你写 -webkit-clip-path: path(...) 或双写声明，它都会静默忽略整条规则——不是报错，是直接跳过。这不是配置问题，是引擎层面缺失。查证很简单：打开 DevTools → Elements 面板，看该样式是否被划掉或根本不出现在 computed 样式里。
polygon() 在 Firefox 中能用，但坐标单位写错就失效
Firefox 支持 clip-path: polygon()，但极其严格：任何单位错误（比如漏空格、混用 % 和 px）、语法多逗号或少括号，都会导致整条声明被丢弃，且无提示。
- ✅ 正确写法：
polygon(0% 0%, 100% 0%, 100% 50%, 50% 100%, 0% 50%) - ❌ 失效写法：
polygon(0%0%, 100%0%, ...)（缺空格）、polygon(0px 0px, ...)（px在polygon()中不被识别） - ⚠️ 注意：百分比基于元素 content box 实际宽高，若父容器有
aspect-ratio或图片拉伸高度，图形会变形
真正在 Firefox 里稳定工作的 fallback 方案
别依赖 polyfill 或 JS 补丁，Firefox 对 clip-path 的支持断层是硬伤。生产环境必须降级：
- 优先用
clip-path: url(#id)引用内联 SVG：<clippath clippathunits="objectBoundingBox"></clippath>+<path d="..."></path>，确保viewBox与目标元素比例一致 - ID 必须合法：避开点号、斜杠，比如
#avatar.clip→ 改成#avatar_clip - 避免在
<table> 或 <code><td> 上直接用 <code>clip-path，Firefox 对表格盒模型处理异常，外包一层<div> 更稳妥 <li>简单形状（圆角、圆形）直接用 <code>border-radius，IE9+ 全兼容，零风险 - 父容器没设
overflow: hidden→ 裁剪区域溢出，内容照常显示（尤其在position: absolute元素上） - 对
<img>同时用了clip-path和object-fit: cover→ 行为冲突，Firefox 渲染不可预测 - 元素是
display: inline且未显式设display: block或inline-block→ 裁剪生效但可点击/可见区域极窄 - 用了
transform: scale()→ Firefox 先缩放再裁剪，坐标系错乱，切角位置偏移
为什么写了 clip-path 却在 Firefox 里“看起来没裁剪”？
最常被忽略的不是语法，而是渲染上下文：
Firefox 不吃“差不多”，它要么全认，要么全丢。真正关键的是把裁剪逻辑从 CSS 函数里抽出来，落到 SVG 定义或原生属性上——否则你调的永远不是 bug，是浏览器能力边界。
