box-reflect在现代浏览器中基本不可用：chrome自44版起移除，firefox从未支持，safari仅旧版本部分支持，现已被w3c弃用；推荐用伪元素+transform scaley(-1)+linear-gradient遮罩+blur模拟倒影。
box-reflect 在现代浏览器中基本不可用
直接说结论：box-reflect 是 WebKit 早期私有属性，Chrome 自 44 版本起已移除，Firefox 和 Safari（除极老版本）均未实现。现在用它，图片倒影效果在绝大多数用户设备上根本不会显示。
替代方案：用 transform + opacity 模拟倒影
这是目前最通用、可控性最强的做法，兼容所有现代浏览器，包括移动端。核心思路是复制一张图片，垂直翻转，再降低透明度和模糊度：
img {
position: relative;
}
img::after {
content: "";
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 80%;
background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0.6));
transform: scaleY(-1);
transform-origin: top;
filter: blur(2px);
pointer-events: none;
}
img::after {
background-image: inherit;
background-size: cover;
background-position: center top;
}
注意几个关键点：
-
background-image: inherit要配合background-size和background-position才能对齐原图，否则倒影错位 -
transform-origin: top确保翻转轴在顶部，否则倒影会偏移或截断 -
filter: blur()值不宜过大（建议 1–3px），否则边缘发虚、性能下降 - 不推荐用
opacity单独控制明暗，应优先用linear-gradient遮罩，更自然
如果必须支持 IE 或需要 SVG 级精度，用 SVG <fegaussianblur></fegaussianblur>
SVG 方案渲染质量更高，且可精确控制倒影长度、模糊半径和渐变过渡，适合设计稿还原度要求高的场景：
<svg width="300" height="400"><defs><filter id="reflection"><fegaussianblur in="SourceGraphic" stddeviation="1.5"></fegaussianblur><fecomponenttransfer><fefunca type="linear" slope="0.6"></fefunca></fecomponenttransfer></filter></defs><image href="photo.jpg" x="0" y="0" width="300" height="200"></image><image href="photo.jpg" x="0" y="200" width="300" height="200" transform="scale(1,-1)" filter="url(#reflection)"></image></svg>
常见问题：
-
href在部分旧版 IE 中需换成xlink:href - 两个
<image></image>的尺寸和位置必须严格对应，否则倒影撕裂 -
stdDeviation大于 3 时，iOS Safari 可能出现渲染异常
别踩这些坑
实际项目中容易忽略但影响交付的细节：
- 响应式图片下，
background-image: inherit不会随srcset切换，需 JS 监听或用picture+ SVG 组合 - 使用
transform: scaleY(-1)后，若父容器有overflow: hidden，倒影会被裁剪——要给父元素留出足够 bottom padding - WebP 格式图片在某些 Android WebView 中，
::after无法继承background-image，得降级为 base64 或 PNG - 倒影高度写死百分比（如
height: 80%）在不同宽高比图片上表现不一致，更稳妥的是用aspect-ratio或 JS 动态计算
倒影不是视觉糖，而是空间关系的暗示。做得太重会抢主体，太淡又失去作用。参数调到“看得出但不刻意”，往往比技术方案本身更花时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
