box-reflect已基本不可用，现代浏览器均不支持；最可靠方案是用::after伪元素复制内容、transform: scaley(-1)垂直翻转、mask-image或background渐变实现渐隐倒影，并设overflow: hidden防溢出。
box-reflect 在现代浏览器中基本不可用——它从未成为标准，Chrome 和 Firefox 早已移除支持，Safari 仅在极旧版本（≤ iOS 6 / OS X 10.9）中部分实现，现在连 @supports 都检测不到。别浪费时间查兼容性表了，直接换方案。
用 transform + opacity 模拟倒影最可靠
这是当前唯一跨浏览器稳定、可控的方式。核心思路是复制文字节点，垂直翻转后加渐变遮罩：
- 用
content伪元素或 JS 克隆文本，避免 DOM 冗余 - 倒影容器设
transform: scaleY(-1)，再用transform-origin: top控制翻转轴心 - 遮罩必须用
mask-image或background渐变，opacity线性衰减会漏底色 - 注意父容器需设
overflow: hidden，否则翻转内容可能溢出
.reflected {
position: relative;
display: inline-block;
}
.reflected::after {
content: attr(data-text);
position: absolute;
top: 100%;
left: 0;
transform: scaleY(-1);
transform-origin: top;
mask-image: linear-gradient(to bottom, #000, transparent);
/* 或 background: linear-gradient(to bottom, rgba(0,0,0,0.2), transparent); */
}
box-reflect 的历史参数和失效原因
当年 Safari 支持时语法是 box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0,0,0,0.2))); ，但问题太多：
- 方向值只认
above/below/left/right，不支持flex或grid布局流 - 偏移量
10px是硬编码，无法响应式缩放 - 渐变遮罩只能用 WebKit 专属语法，且不支持 CSS 变量
- 没有 fallback 机制，一旦失效整个倒影消失，无降级提示
移动端要注意的渲染陷阱
iOS Safari 对 transform + mask-image 组合有渲染延迟，尤其配合 font-smoothing 或子像素抗锯齿时：
- 加
will-change: transform到倒影元素，触发 GPU 加速（但别滥用） - 避免在
scroll中动态生成倒影，优先静态渲染 - 若用
background渐变替代mask-image，iOS 15+ 才支持background-blend-mode混合，老版本得用两层叠加 - 字体过小（
font-size ）时倒影边缘易发虚，建议最小字号设为 <code>14px
真正麻烦的不是怎么画倒影，而是怎么让倒影在不同缩放比、不同 DPR 屏幕下保持清晰——这得靠 image-rendering: -webkit-optimize-contrast 和手动控制 scale() 倍数，而不是依赖任何“自动”属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
