box-reflect已废弃，现代浏览器基本不支持；推荐用clip-path+scaleY(-1)伪元素方案实现兼容性好、可控性强的倒影效果。
用 CSS box-reflect 实现图片倒影最直接
Chrome、Safari（含 iOS）支持 box-reflect，一行样式就能生成反射效果，比 Canvas 或伪元素手动拼更轻量。但注意：Firefox 和 Edge（旧版）完全不支持，现代 Edge（Chromium 内核）已支持。
常见错误是直接写 box-reflect: below; 却没设容器 overflow 或图片尺寸，导致倒影被裁掉或不可见。
-
box-reflect必须作用在图片本身（ - 推荐显式设置
height或max-height，避免因响应式缩放导致倒影比例错乱 - 反射偏移量用
box-reflect: below 4px;控制间距，单位支持px、em、%，但%是相对于原图高度计算的 - 可叠加
mask-image或渐变遮罩实现淡出效果：box-reflect: below 0px linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.4));
兼容老浏览器：用 ::after + transform: scaleY(-1)
当项目必须支持 Firefox 或 IE 时，得放弃 box-reflect，改用伪元素翻转。核心思路是复制图片内容、垂直翻转、定位到底部，并加遮罩防止边缘锯齿。
容易踩的坑是忘记设置 position: relative 在父容器上，或伪元素未设 content: "" 导致不渲染；还有翻转后图片上下颠倒，需靠 top 偏移把倒影“拉回”底部。
- 父容器需设
position: relative，否则::after会脱离文档流乱飘 -
::after的content必须为""，且要设background-image复制原图 URL（无法继承） -
transform: scaleY(-1)后，倒影顶部实际在原图底部位置，所以常用top: 100%+margin-top: 4px控制间隙 - 遮罩用
mask-image或background渐变覆盖底部，避免倒影边缘生硬：例如mask-image: linear-gradient(to bottom, transparent, black);
filter: blur() 和 opacity 配合增强真实感
纯翻转或 box-reflect 生成的倒影太“实”，和真实玻璃/水面反射有差距。加模糊和透明度能立刻提升质感，但要注意性能和层级。
在低端设备上对大图连续应用 blur() 可能引发重绘卡顿，尤其配合滚动时。建议只对静态展示图使用，或限制模糊半径 ≤ 2px。
-
filter: blur(1px)比blur(2px)性能好很多，视觉差异却不大 -
opacity: 0.6～0.8是较自然的反射强度，低于 0.5 容易看不清，高于 0.9 就像贴了张新图 - 如果倒影区域有文字或按钮重叠，记得给倒影层设
pointer-events: none，避免误触 - 不要对整个容器加
filter（如父div），否则原图也会被模糊——必须只作用在倒影元素或伪元素上
用 canvas 动态生成倒影适合复杂交互场景
当需要响应鼠标悬停动态调整倒影长度、角度，或倒影要随滚动实时变形（比如模拟水波），CSS 方案就不够用了，得上 canvas 绘制。
关键点不是“怎么画”，而是“什么时候重绘”。监听 resize 和 scroll 事件频繁调用 drawImage 会导致卡顿，必须节流或用 requestAnimationFrame 控制帧率。
- 先用
ctx.drawImage(img, 0, 0, w, h)绘原图，再用ctx.scale(1, -1)翻转坐标系，最后drawImage同一图源到下方位置 - 翻转后 Y 轴原点移到画布底部，需手动调整绘制坐标：
ctx.drawImage(img, 0, -h * 2 - gap, w, h) - 加水波扰动要用
createPattern+ 正弦位移，但计算量大，建议预生成几帧动画用setInterval切换 - 移动端要注意
window.devicePixelRatio，否则高 DPI 屏幕下倒影模糊——绘制前需设canvas.width = w * dpr并用style.width缩放回逻辑尺寸
倒影看似简单，真正难的是在清晰度、性能、兼容性之间找平衡点。多数项目用 box-reflect + 渐变遮罩就够了，只有当设计明确要求动态变形或跨浏览器强一致时，才值得投入 canvas 方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
