box-reflect在非webkit浏览器中完全无效——firefox从未支持，chrome自v45起移除，edge 79+及safari 14+均已弃用；唯一可靠方案是伪元素+scaley(-1)+mask-image。
box-reflect 在非 WebKit 浏览器里根本不会生效
直接说结论：box-reflect 是 WebKit 早期私有属性，Chrome 自 v45 起已移除，Firefox 从未实现，Edge 79+ 彻底放弃，Safari 14+（iOS/macOS）也已下线。你在 Firefox 或新版 Edge 里写 box-reflect: below;，DevTools 会把它划掉，控制台不报错，但倒影就是不出现——不是你漏写了前缀，是浏览器压根不认这个属性。
用伪元素 + scaleY(-1) + mask-image 是当前唯一可靠方案
主流做法是复用内容、翻转、遮罩渐隐。关键点不在“有没有倒影”，而在“边缘是否自然、缩放是否稳定、文字是否清晰”：
-
transform: scaleY(-1)必须配合transform-origin: center bottom，否则翻转后位置偏移，尤其在inline-block或display: flex容器中容易错位 -
mask-image: linear-gradient(to bottom, transparent, #000)控制渐隐长度；Safari 15.4+ 需加-webkit-mask-image前缀，且只接受rgba()不接受hsla() - 伪元素要显式写
content: attr(data-text)或content: "文本"，不能靠content: ""+background模拟，否则无法选中、缩放失真、打印空白 - 若原元素用了
font-smoothing: antialiased，伪元素也得加，否则倒影文字边缘发虚
SVG 滤镜方案不推荐用于常规倒影
搜“CSS 倒影模糊”常看到 <fegaussianblur></fegaussianblur> 或 <feturbulence></feturbulence>，但这属于重量级 SVG 滤镜，存在明显问题：
- 性能开销大，滚动或动画中易卡顿，尤其在 Android WebView 和低端 iOS 设备上
- 无法响应
hover或 JS 动态切换（filter属性本身支持过渡，但 SVG 滤镜引用路径变更无法触发重绘） - 与
mask-image或clip-path复合使用时行为不可控，部分 Safari 版本会直接忽略滤镜 - 调试困难：滤镜效果不显示在 DevTools 的 computed 样式中，只能靠反复改 SVG 内容验证
响应式倒影最容易被忽略的三个坑
倒影随图片缩放失败，通常不是 CSS 写错了，而是布局上下文被破坏：
- 父容器设了
overflow: hidden？它会把翻转后的倒影直接裁掉，删掉即可 - 图片用了
object-fit: cover？伪元素的background-image必须同步设置background-size: cover和background-position-y: bottom，否则倒影内容对不上 - 图片宽高是
max-width: 100%+height: auto？伪元素必须用width: 100%+height: 40%（相对单位），不能写死px值，否则移动端倒影拉伸或消失
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
