Firefox 完全不支持 -webkit-box-reflect，因其是 WebKit 私有属性且未被 CSS WG 标准化；替代方案需用 ::after 伪元素 + transform: scaleY(-1) + transform-origin: top + mask-image 双写实现跨浏览器倒影效果。
Firefox 为什么完全不支持 -webkit-box-reflect
-webkit-box-reflect 是 WebKit 内核（Safari、旧版 Chrome）的私有前缀属性，Firefox 从未实现它，也无计划支持。这不是兼容性“问题”，而是标准路径分歧：CSS WG 拒绝将其标准化，认为倒影属于表现层细节，应由开发者用更可控的方式实现。所以你在 Firefox 控制台看不到警告，它只是静默忽略该声明。
替代方案必须用伪元素 + transform: scaleY(-1)
主流且跨浏览器的做法是手动构造倒影层：
- 用
::after伪元素复制内容，或通过background-image复用原图 - 对伪元素设置
transform: scaleY(-1)实现垂直翻转 - 必须加
transform-origin: top（不是 center），否则翻转会以中心为轴，导致倒影位置错乱 - 配合
opacity和mask-image（或渐变linear-gradient）做淡出效果，mask-image在 Firefox 中需写成-webkit-mask-image+mask-image双写
常见错误：直接套用 WebKit 示例代码
很多博客贴出的倒影代码只含 -webkit-box-reflect: below 5px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0,0,0,0.2))); ，这在 Firefox 中完全无效。更糟的是，如果同时写了 transform: scaleY(-1) 却忘了重置 transform-origin，倒影会从容器顶部“飞出去”。另外，伪元素若未设 content: "" 或未显式指定 display: block，在 Firefox 中可能根本不渲染。
复杂点在于倒影与滚动/动画的同步
当目标元素可滚动或带 transition 时，伪元素倒影不会自动跟随——你得监听 scroll 或用 will-change: transform 配合 JS 更新伪元素 top 值；若用 clip-path 裁剪倒影区域，Firefox 对 inset() 的解析和 Chrome 有细微差异，建议统一用 path() 或多边形坐标显式定义。
立即学习“前端免费学习笔记（深入）”；
