-webkit-box-reflect是webkit私有非标准属性，用于生成元素镜像倒影，但chrome自45版、firefox从未、safari 15.4+均已弃用，现代项目不可用；推荐用::after伪元素+transform: scaley(-1)+mask-image+渐变遮罩实现兼容、响应式倒影效果。
什么是 -webkit-box-reflect，它现在还能用吗？
-webkit-box-reflect 是 WebKit 内核早期（Safari 4–6、旧版 Chrome）支持的私有 CSS 属性，用于在元素下方、上方、左侧或右侧生成镜像反射效果，并可叠加渐变遮罩模拟“淡出”阴影。但它**不是标准属性，已被现代浏览器逐步弃用**：Chrome 自 45 版起移除支持，Firefox 从未支持，Safari 自 15.4 起也已废弃（虽部分版本仍能触发，但无保障）。
所以，如果你的目标是兼容当前主流浏览器（Chrome ≥115、Firefox ≥110、Safari ≥16），-webkit-box-reflect 不应作为首选方案——它只适合维护非常老的内部系统，或做兼容性兜底时的降级提示。
用 transform: scaleY(-1) + opacity 模拟镜像阴影（推荐）
这是目前最可靠、语义清晰、可精确控制的替代方式。核心思路是：复制图片 → 垂直翻转 → 降低不透明度 → 定位紧贴原图底部 → 添加线性渐变遮罩收尾。
实操要点：
- 用
::after伪元素或额外<img>标签承载反射层，避免破坏原始 DOM 结构 - 必须设置
transform-origin: top，否则scaleY(-1)会绕中心翻转，导致位置偏移 - 反射层需设
pointer-events: none，防止遮挡下方交互 - 渐变遮罩用
mask-image（现代写法）或-webkit-mask-image（兼容旧 Safari）
.reflected {
position: relative;
display: inline-block;
}
.reflected::after {
content: "";
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 60%;
background: linear-gradient(to bottom, rgba(255,255,255,0.8), transparent);
-webkit-mask-image: linear-gradient(to bottom, #000, transparent);
mask-image: linear-gradient(to bottom, #000, transparent);
transform: scaleY(-1);
transform-origin: top;
opacity: 0.3;
pointer-events: none;
}
为什么不用 filter: url(#reflection)（SVG 滤镜）？
SVG 反射滤镜（如 <feconvolvematrix></feconvolvematrix> 或 <feoffset></feoffset> 配合 <femerge></femerge>）理论上可行，但实际踩坑多：
常见问题包括：
- 反射区域无法随图片宽高自动缩放，需硬编码
width/height，响应式场景极易错位 - Safari 对
filter中 SVG 引用的缓存行为不稳定，常出现首次加载无反射、刷新后才生效 - 滤镜层级受
z-index和 stacking context 影响大，容易被父容器overflow: hidden截断 - 性能开销明显高于 CSS transform，尤其在滚动容器中频繁重绘时掉帧
除非你已有现成 SVG 滤镜模块且仅面向 Safari 旧版本，否则没必要引入这套复杂链路。
移动端和高 DPR 屏幕下的像素对齐问题
镜像阴影在 Retina 屏或安卓高分屏上容易出现模糊边线，本质是 transform: scaleY(-1) 导致 sub-pixel 渲染失准。
解决方法很具体：
- 给反射层添加
backface-visibility: hidden，强制 GPU 加速并改善渲染精度 - 避免使用小数
height（如60.5%），统一用整数百分比或视口单位 - 若图片本身带
border-radius，反射层需同步设置相同值，否则圆角接缝处会露白 - 慎用
will-change: transform，它可能引发 iOS Safari 的闪烁 bug（iOS 16.4 已修复，但 iOS 15 仍存在）
镜像阴影真正的难点不在实现，而在于它必须和图片尺寸、容器裁剪、缩放动画、DPR 切换全部耦合校准——改一处，往往要全链路回归验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
