box-reflect在现代项目中不可用，因非标准、Chrome v45+已移除、Firefox从未支持、Safari仅旧版部分支持，且不响应:hover或JS切换；响应式场景下必失败，因其依赖静态尺寸计算，无法适配max-width:100%、object-fit及媒体查询，倒影易错位、截断或失真。
box-reflect 在现代项目中不能用——它不是标准属性，Chrome 自 v45 起已移除，Firefox 从未支持，Safari 仅在 ≤ iOS 7 / macOS 10.9 中部分可用，且不响应 :hover 或 JS 动态切换。真要实现响应式倒影，得绕开它，用可控、可缩放、可适配的伪元素方案。
为什么-webkit-box-reflect在响应式场景下必然失败
这个前缀属性依赖元素盒模型的静态尺寸计算，一旦图片宽高随视口变化（比如 max-width: 100% + height: auto），倒影就会错位、拉伸或截断；它也不感知 object-fit，若用了 cover 或 contain，倒影内容与原图完全对不上。更关键的是：它无法通过媒体查询重设偏移量或渐变范围，@media 里写 -webkit-box-reflect: below 5px 是无效的。
常见错误现象：
-
-webkit-box-reflect: below 10px在桌面显示正常，移动端倒影消失（因父容器触发层叠上下文） - 图片加了
border-radius，倒影边缘仍是直角 - 用
background-image设置图片，倒影渲染成纯色块（inherit失效）
用 ::after + scaleY(-1) 实现真正响应式倒影
核心是让倒影层和原图共享同一套尺寸逻辑，并通过相对单位保持比例一致。不需要 JS，纯 CSS 即可随容器缩放。
实操要点：
- 父容器必须设
position: relative，否则::after定位会脱出上下文 - 倒影高度用百分比（如
height: 40%），而非固定像素，避免缩放断裂 -
background-image: inherit仅对background有效；若原图是<img>标签，需改用background-image: url(...)显式复制，或用background-size: cover; background-position: center bottom对齐翻转后的坐标系 -
transform-origin: top必须显式声明，否则默认以中心为轴翻转，倒影会向上飘出可视区 - 渐变遮罩推荐用
mask-image: linear-gradient(to bottom, transparent, #000 70%)（Safari 15.4+ 稳定），旧版 Safari 可降级为clip-path: inset(0 0 30% 0)
响应式断点下必须同步调整的三个值
倒影不是“设一次就完事”的效果。当屏幕宽度变化导致图片高度改变时，以下三者必须联动调整，否则倒影会过长、过短或透明度突变：
-
height：倒影容器高度，建议用40%（桌面）→30%（平板）→20%（手机） -
mask-image渐变终点位置：从#000 70%→#000 60%→#000 50%，确保淡出区域始终占倒影高度的约 30% -
opacity或遮罩透明度：大屏可用opacity: 0.5，小屏建议提至0.65，弥补因尺寸缩小导致的视觉弱化
别用 overflow: hidden 包裹父容器——它会直接裁掉倒影；也别给倒影层设 z-index: -1 后再加 pointer-events: none，这在部分 Android WebView 中会导致点击穿透失效，稳妥做法是只加 pointer-events: none。
移动端要不要保留倒影？
要，但得关掉。小屏下倒影与原图间距压缩，易造成视觉拥挤，且 filter: blur() 在低端设备上明显掉帧。最务实的做法是用 md:hidden（Tailwind）或 @media (max-width: 768px) { .reflected-img::after { display: none; } } 直接隐藏倒影层。这不是妥协，而是对真实用户设备性能与阅读习惯的尊重——倒影是装饰，不是信息。
真正容易被忽略的点：倒影的圆角必须和原图完全一致。如果原图有 border-radius: 12px，倒影层也要同步加上，否则接缝处会漏出直角背景色，响应式缩放时这个问题会被放大。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
