-webkit-box-reflect是已被chrome 44+、firefox、edge及safari 15.4+彻底移除的废弃私有属性，现代浏览器直接忽略该声明；推荐用::after伪元素+transform: scaley(-1)+mask-image渐变遮罩实现兼容倒影。
box-reflect 是已被移除的私有属性，不是“不生效”，是根本不存在
Chrome 自 44 版起彻底移除 -webkit-box-reflect，Firefox 从未实现，Edge（Chromium 内核）和新版 Safari（15+）也不再可靠支持。你写的代码在大多数现代浏览器里不会报错，但也不会渲染出任何倒影——因为解析器直接忽略该声明。
这不是兼容性开关没开、前缀没加全或语法写错的问题，而是标准层面已废弃：W3C 未采纳，WHATWG 不维护，各引擎主动下线。查开发者工具的“Computed”面板，你会看到这一行压根没出现在最终样式里。
伪元素方案里常见的倒影错位/消失问题
用 ::after + transform: scaleY(-1) 模拟倒影时，以下三点最容易导致效果异常：
-
position: relative必须加在**父容器**上，而不是img自身；否则::after的top: 100%会相对于视口或最近定位祖先计算，倒影飘走 -
background-image: inherit仅继承img的src，但不继承object-fit或height行为；若原图用了object-fit: cover，倒影需同步设background-size: cover和background-position: center top - 父容器若设了
overflow: hidden，倒影会被直接裁掉——这不是 bug，是 CSS 渲染规则，删掉它或改用clip-path更可控
mask-image 在 Safari 中不显示的硬限制
Safari 对 mask-image 的支持有明确缺陷：它不接受内联 linear-gradient() 值，必须转成 base64 编码的 SVG 或使用 -webkit-mask-image 配合 URL 形式渐变。例如：
mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0ibWFzayIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0ibm9uZSIvPjxzdG9wIG9mZnNldD0iMC43IiBzdG9wLWNvbG9yPSIjMDAwIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMDAwIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNtYXNrKSIvPjwvc3ZnPg==");
不处理这个，Safari 下倒影会变成一块纯色块或完全透明。
filter: blur() 性能和视觉双风险
filter: blur(2px) 看似自然，但在中低端 Android 设备或 iOS Safari 中容易触发重绘卡顿，且模糊值 >3px 会导致边缘发虚、文字倒影失真。更稳妥的做法是：
- 用
opacity: 0.6控制整体明暗，比模糊更轻量 - 把
blur()降为1px，仅用于柔化硬边 - 避免在
::after上叠加transform和filter，某些旧版 WebView 会直接丢弃该伪元素
真正难的不是写出倒影，是让同一套 CSS 在 Chrome 132、Safari 18、Edge 131 和微信内置浏览器里都对齐、不闪烁、不卡顿——这些细节没有银弹，只能逐个环境验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
