box-reflect 已被主流浏览器废弃，应使用 mask-image + transform 模拟倒影；关键在 mask-image 用 linear-gradient、transform 用 scaley(-1)、父容器设 overflow: hidden，并避免 filter: blur() 破坏边缘清晰度。
box-reflect 在现代浏览器中基本不可用
直接说结论：box-reflect 是 WebKit 早期私有属性，Chrome 自 44 版起已移除，Firefox 和 Safari（除旧版 macOS Safari）均未实现。现在写 box-reflect，等于写了个无效声明——CSS 解析器会忽略它，控制台也不会报错，但倒影不会出现。
用 mask-image + transform 模拟倒影最可靠
主流做法是手动复制元素、垂直翻转、加渐变遮罩。关键不是“怎么画”，而是“怎么控制遮罩边缘和性能”：
-
mask-image必须用linear-gradient，不能用 PNG（否则缩放失真且不响应） - 翻转用
transform: scaleY(-1)，别用rotateX(180deg)（会导致字体 subpixel 渲染异常） - 父容器需设
overflow: hidden，否则翻转后内容可能溢出可见区 - 对图片类元素，建议用伪元素
::after承载倒影，避免 DOM 膨胀
示例片段：
img {
position: relative;
}
img::after {
content: "";
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 80%;
background: linear-gradient(to bottom, rgba(255,255,255,0.3), transparent);
-webkit-mask-image: linear-gradient(to bottom, black, transparent);
mask-image: linear-gradient(to bottom, black, transparent);
transform: scaleY(-1);
background-image: inherit;
background-position: top;
}
filter: blur() 配合 opacity 容易糊成一片
有人想给倒影加模糊增强真实感，但 filter: blur(2px) 一加，边缘就发虚、文字变毛，尤其在高 DPI 屏幕上更明显：
-
blur()作用于整个伪元素，包括本该锐利的顶部边界 -
opacity和blur叠加后，透明区域也会被模糊，导致“雾化”而非“渐隐” - 真正可控的做法：把
mask-image的渐变范围拉宽（比如linear-gradient(to bottom, black 0%, black 60%, transparent 100%)），再单独对底部 20% 区域加轻微blur(0.5px)
SVG <feoffset></feoffset> 倒影兼容性好但维护成本高
如果项目需支持 IE11 或要求像素级精确（比如设计系统组件），SVG 方案反而更稳：
- 用
<feoffset></feoffset>偏移原图，<fegaussianblur></fegaussianblur>控制模糊半径，<fecomponenttransfer></fecomponenttransfer>调透明度曲线 - 缺点是每个倒影都要定义独立
<filter></filter>，无法复用；且 SVG 内联时体积膨胀快 - 别把 filter ID 写死成
id="reflection"——多个倒影必须用唯一 ID，否则只生效第一个 - React/Vue 中动态生成 SVG filter 时，注意 ID 冲突，建议用
useId()或哈希值生成
倒影看着简单，实际卡点全在遮罩过渡是否自然、翻转后基线是否对齐、以及不同 DPR 下的渲染一致性。这些细节没调好，用户第一眼就觉得“假”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
