现代浏览器已弃用box-reflect，推荐用::after伪元素模拟倒影：相对定位、scaleY(-1)翻转、渐变遮罩，并注意图片同步、性能优化与边缘对齐。
box-reflect 在现代浏览器中基本不可用
box-reflect 是 WebKit 早期私有属性（如 -webkit-box-reflect），仅在 Safari 5.1–12 和旧版 Chrome（≤35）中部分支持，Chrome 36+、Firefox、Edge（Chromium 版除外）均未实现，且已被 CSS WG 明确标记为「不计划标准化」。现在写 -webkit-box-reflect 不仅无效，还会触发开发者工具中的废弃警告。
用 ::after 伪元素 + transform + opacity 模拟倒影
这是目前最可靠、可控性最强的方案：手动复制内容、垂直翻转、渐变遮罩。关键在于避免内容重复渲染和布局干扰。
实操建议：
- 给目标元素设
position: relative，确保::after相对定位准确 -
::after的content必须与原内容一致（文字/图片需同步维护，或用 JS 动态注入） - 翻转用
transform: scaleY(-1)，不是rotateX(180deg)（后者会受 perspective 影响） - 遮罩用
mask-image或background渐变（linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25))），避免用opacity全局衰减（会模糊边缘） - 注意图片倒影时，
image-rendering: pixelated可防止缩放失真（尤其像素风图）
图片倒影要慎用 background-image 复制
直接在 ::after 里写 background-image: url(...) 看似简单，但存在三个硬伤：
立即学习“前端免费学习笔记（深入）”；
- 无法响应原图的
object-fit或aspect-ratio行为，宽高比容易错位 - 原图 src 动态变更时，伪元素不会自动同步（需 JS 手动更新
style.backgroundImage） - 加载失败时，原图有
alt提示，伪元素无 fallback
更稳妥的做法是把图片包一层 <div class="reflected"><img></div>，再用 JS 克隆 img 节点插入 ::after 容器（或用 getComputedStyle 读取 background-image 值）。
性能敏感场景下倒影应设为可选
倒影本质是额外 DOM 节点 + 额外绘制层，滚动或动画中易掉帧。特别是列表项批量使用时：
- 用
@media (prefers-reduced-motion: reduce)关闭倒影 - 对移动端加
will-change: transform到伪元素（仅当倒影区域固定且不频繁重排） - 长列表建议只对视口内元素启用倒影（IntersectionObserver 控制）
- 避免在
will-change或transform已触发 GPU 加速的父容器里再套倒影——多一层合成层反而拖慢
倒影不是装饰糖，是视觉权重较高的效果；一旦用了，就得管它在各种设备、各种交互状态下的表现。很多人忽略的是：倒影的「断层感」往往来自翻转后边缘对不齐，而不是透明度不够——检查 transform-origin 是否为 center top，以及是否意外触发了 subpixel 渲染。
