box-reflect已废弃，仅Safari支持且不稳定；推荐用伪元素+渐变模拟倒影，需注意父容器定位、响应式高度、渐变遮罩、翻转对齐及overflow裁剪等问题。
box-reflect 在现代项目里基本不能用
它早在 2014 年就被 Chrome 和 Firefox 官方移除支持，Safari 是唯一还留着的浏览器，但只支持 -webkit-box-reflect，且行为不稳定、不支持动画、无法与 transform 或 filter 叠加生效。你写完发现只有 Safari 能看，其他浏览器全空白，不是代码写错了，是标准早就弃用了。
替代方案：用伪元素 + gradient 模拟倒影
这是目前最可控、兼容性最好（IE11+ 都行）的做法，核心思路是复制图片、垂直翻转、叠加渐变遮罩。关键点不在“怎么画”，而在“怎么对齐”和“怎么响应”：
-
position: relative必须加在父容器上，否则::after的定位会出错 - 倒影高度建议用
height: 40%而非固定像素，避免图片缩放时倒影断裂 - 渐变遮罩必须用
background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.8))，透明度过渡要平缓，太硬会像贴了层白纸 - 别忘了加
transform: scaleY(-1)到伪元素，且需配合transform-origin: top，否则翻转会偏移
.reflected-img {
position: relative;
display: inline-block;
}
.reflected-img::after {
content: "";
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 40%;
background: no-repeat center / cover;
background-image: inherit;
transform: scaleY(-1);
transform-origin: top;
background-position-y: bottom;
pointer-events: none;
mask-image: linear-gradient(to bottom, transparent, #000);
}
遇到图片拉伸或倒影错位，先查这三个地方
这不是 CSS 写得不够酷的问题，而是布局上下文被悄悄改写了：
- 父容器有没有设
overflow: hidden？有就删掉，它会把倒影直接裁掉 - 图片本身有没有设
max-width: 100%或height: auto？没设会导致伪元素继承错误尺寸 - 是否在
img上用了object-fit: cover？用了的话，伪元素里的background-image就得同步调整background-size和background-position，否则倒影内容对不上
真要动态控制倒影（比如 hover 显隐），别碰 box-reflect
哪怕只支持 Safari，它也不响应 :hover 或 JS 的 classList.toggle。所有基于状态切换的交互，都得走伪元素 + opacity 或 visibility 的路线：
立即学习“前端免费学习笔记（深入）”；
- 用
opacity: 0.6控制倒影可见度，比display: none更稳妥，避免重排 - 加
transition: opacity 0.2s ease，但别给transform加过渡——scaleY(-1)本身不触发硬件加速，动画会卡 - 如果页面有大量倒影图片，记得把伪元素的
will-change: opacity加上，防低端设备掉帧
真正麻烦的从来不是“怎么做出倒影”，而是“怎么让它不随图片宽高变化而撕裂”，这点连很多设计稿都不会标清楚。
