box-reflect 已废弃且兼容性极差，现代项目应改用 mask-image + scaleY(-1) 手动实现倒影；伪元素方案更轻量但需同步样式；box-shadow 无法替代倒影，二者语义与视觉逻辑完全不同。
box-reflect 兼容性差，现代项目里基本不能用
Chrome 和 Safari 旧版曾支持 box-reflect，但它是已被废弃的非标准属性，Firefox 从未支持，Edge 从 79+ 彻底移除。现在查 MDN 或 CanIUse，它已标为「deprecated」且无 polyfill 路径。
常见错误现象：box-reflect: below; 在新 Chrome 里完全没反应，开发者工具里该属性被划掉，控制台却不会报错——容易误以为是写法问题，其实是浏览器直接忽略。
- 使用场景仅限于老式内网系统、或需兼容 IE10+/Safari 5.1 的极少数遗留页面
-
box-reflect的方向参数（below/above/right/left）和偏移值（如box-reflect: below 10px;）在不同旧版本中行为不一致 - 它不触发硬件加速，滚动时倒影易撕裂；且无法和
transform或filter叠加生效
用 mask-image + transform 模拟倒影更可靠
主流做法是手动复制元素、翻转、遮罩渐变，靠 mask-image 控制透明过渡。这绕过了浏览器对 box-reflect 的弃用，且可控性强。
关键点在于：翻转必须用 scaleY(-1)（不是 rotateX(180deg)），否则会破坏文本渲染清晰度；遮罩必须用 linear-gradient 实现从不透明到透明的衰减。
立即学习“前端免费学习笔记（深入）”；
- 示例结构：
<div class="reflected"> <div class="content">文本</div> <div class="reflection"></div> </div> -
.reflection需设transform: scaleY(-1); margin-top: -2px;（负 margin 抵消翻转后位置偏移） -
mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);—— 百分比决定倒影长度，太短像截断，太长显脏 - 注意：Safari 15.4+ 要求
-webkit-mask-image前缀，且只认rgba()不认hsla()渐变色
伪元素方案适合静态内容，避免 DOM 冗余
如果倒影内容不变（比如 logo、图标、标题），用 ::after 伪元素生成更轻量，不用额外标签，也利于维护。
但伪元素无法直接继承父元素的全部样式（比如换行、字体特性），需手动同步关键属性，否则倒影文字可能模糊或错位。
- 必须显式设置
content: attr(data-text);或content: "固定文本";，不能靠content: "";+background模拟（那样无法选中/缩放） -
transform: scaleY(-1) translateZ(0);中的translateZ(0)是为了在部分安卓 WebView 触发 GPU 加速，防止闪烁 - 若父元素有
font-smoothing: antialiased;，伪元素也要加，否则倒影文字边缘发虚 - 不适用于含 SVG、iframe 或动态插入子节点的内容——伪元素无法“抓取”这些
阴影与倒影别混用，性能和语义都错位
有人用 box-shadow 模拟倒影（比如 box-shadow: 0 10px 15px rgba(0,0,0,0.1);），这是典型误用：阴影是发散光效，倒影是镜像复制，视觉逻辑完全不同。
这种写法在高 DPI 屏幕上尤其假——阴影边缘模糊、无翻转特征、无法随内容高度自适应，还白白增加合成层开销。
- 真正需要倒影时，用户是在找空间映射关系（如卡片悬停反馈、数据可视化中的深度暗示）
-
box-shadow适合表现浮起感，mask-image + scaleY才表达反射面存在 - 移动端滚动时，滥用多层
box-shadow会导致 FPS 下降，而合理用will-change: transform对倒影容器优化更有效
倒影的本质是视觉契约：告诉用户“这里有可反射的表面”。实现上没捷径，得接受要手写几行 CSS、做兼容判断、测真机渲染——省掉这步，最后上线就是一坨糊掉的镜像。
