box-reflect已废弃，仅旧版safari支持且功能受限；推荐用clip-path+scaley(-1)伪元素方案实现兼容性好、可控性强的倒影效果。
box-reflect 在现代浏览器中基本不可用——它从未被纳入 CSS 标准，仅作为 WebKit 早期实验性私有属性存在，Chrome 已于 v45+ 彻底移除，Firefox 和 Edge 从未支持。想实现倒影效果，得绕开它。
为什么 box-reflect 现在不能用
这个属性只在 Safari 旧版本（≤ iOS 7 / macOS 10.9）中可用，且行为不一致：不支持渐变遮罩、无法控制缩放或偏移、与 transform 或 filter 复合使用时经常失效。现在写 box-reflect: below; 几乎等于写注释。
用 clip-path + scaleY(-1) 模拟倒影（推荐）
这是目前最可控、兼容性好（Chrome 55+、Firefox 54+、Safari 15.4+）、能配合阴影/渐变的方案：
.reflected-img {
position: relative;
display: inline-block;
}
.reflected-img::after {
content: "";
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 80%; /* 倒影高度 */
background: inherit;
transform: scaleY(-1);
transform-origin: top;
clip-path: inset(0 0 20% 0); /* 遮掉底部20%，模拟淡出 */
opacity: 0.6;
}
-
background: inherit确保倒影取原图样式，需确保父元素有background-image或 img 元素用background-image: url(...)设置 - 若原图是
<img>标签，更稳妥的做法是用伪元素 +background-image复制图层，避免inherit失效 -
clip-path: inset()比mask-image兼容性更好；如需柔和渐变消失，可改用mask-image: linear-gradient(to bottom, black 60%, transparent 100%)（注意 Safari 需加-webkit-前缀）
用 SVG <feoffset></feoffset> + <fegaussianblur></fegaussianblur> 做高质量倒影
适合对视觉精度要求高、需要模糊+位移+透明度分层控制的场景（比如产品页 Banner）：
<svg width="0" height="0"><defs><filter id="reflection"><feoffset dy="2"></feoffset><fegaussianblur stddeviation="1" result="blur"></fegaussianblur><fecomponenttransfer><fefunca type="linear" slope="0.4"></fefunca></fecomponenttransfer><femerge><femergenode in="blur"></femergenode><femergenode in="SourceGraphic"></femergenode></femerge></filter></defs></svg>
然后在图片上应用：<img src="..." style="max-width:90%">
- 注意
<feoffset></feoffset>的dy控制倒影垂直距离，负值会向上偏移（慎用） -
feComponentTransfer中的slope直接调节整体透明度，比opacity更精准（不影响边缘抗锯齿） - 该 SVG 必须在页面内（不能外链），且需确保 ID 不冲突
真正麻烦的不是怎么画倒影，而是响应式下如何保持倒影比例随图片缩放同步变化——clip-path 用百分比值相对安全，但 SVG filter 的 stdDeviation 和 dy 是绝对像素，缩放时容易失真。这时候往往得配合 JS 监听 resize 动态重设 filter 参数，或者直接放弃 SVG 方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
