纯CSS无法可靠实现真正倒影，-webkit-box-reflect已被Chrome 44+和Safari 15.4+废弃，Firefox/Edge从未支持；现需Canvas、SVG或JS模拟。
纯 CSS 无法可靠实现真正的倒影（reflection）效果——浏览器早已废弃 -webkit-box-reflect，且无标准替代方案；现在必须用 Canvas、SVG 或 JS 模拟，否则要么不兼容，要么只是视觉欺骗。
为什么 -webkit-box-reflect 现在不能用了
这个属性曾是 Safari 和旧版 Chrome 唯一支持倒影的方式，但：
- Chrome 从 v44 起彻底移除支持，启用即无效
- Safari 15.4+ 对
-webkit-box-reflect的行为已不稳定，部分缩放/transform 场景下倒影错位或消失 - Firefox 和 Edge 从未支持，也无计划加入
- MDN 明确标记为 Deprecated，W3C 未将其纳入任何草案
用 Canvas 手动绘制倒影（最可控）
适用于需要精确控制翻转位置、模糊度、渐变遮罩的场景，比如产品图展示、动态内容倒影。
核心思路：获取原图像素 → 垂直翻转画布 → 添加透明度渐变遮罩。
立即学习“前端免费学习笔记（深入）”；
关键点：
- 必须等图片加载完成再执行
drawImage，否则 canvas 为空白 - 倒影高度建议设为原图的 0.3–0.5 倍，避免过长失真
- 用
createLinearGradient在倒影底部叠加从透明到半透明的遮罩，模拟真实衰减 - 若原图跨域，需确保服务器返回
Access-Control-Allow-Origin，否则getImageData报SecurityError
const img = document.getElementById('my-img');
const canvas = document.getElementById('ref-canvas');
const ctx = canvas.getContext('2d');
<p>img.onload = () => {
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight * 0.4;</p><p>ctx.translate(0, canvas.height);
ctx.scale(1, -1);
ctx.drawImage(img, 0, -img.naturalHeight <em> 0.4, img.naturalWidth, img.naturalHeight </em> 0.4);</p><p>const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
gradient.addColorStop(0, 'rgba(255,255,255,0.8)');
gradient.addColorStop(1, 'rgba(255,255,255,0)');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);
};用 SVG <feGaussianBlur> + transform="scale(1,-1)"（轻量兼容方案）
适合静态图、不需要 JS 介入的简单页面，兼容 Chrome/Firefox/Edge/Safari 16+，但不支持 IE。
注意：
- 必须将原图和倒影放在同一
<svg>内，用<image>引入（不能直接用 HTML<img>） -
transform="scale(1,-1)"后需手动调整y值，否则倒影会叠在原图上方 - 模糊用
<feGaussianBlur>，stdDeviation="0.5"是较自然的起始值，太大易糊成色块 - 倒影区域建议加
<mask>控制透明度衰减，比 CSS 渐变更稳定
别踩这些坑
实际项目中最常被忽略的细节：
- 响应式场景下，Canvas 倒影不会自动重绘 —— 必须监听
resize并调用clearRect+ 重绘 - 使用
transform: scaleY(-1)伪倒影时，所有子元素（如文字、按钮）也会被翻转，需对内部再套一层scaleY(-1)补偿 - SVG 方案中，如果原图路径含查询参数（如
logo.png?v=2），部分 Safari 版本会拒绝加载，建议改用 base64 或服务端去参 - 阴影和倒影同时存在时，CSS
filter: drop-shadow()会影响倒影区域 —— 应只作用于原图容器，倒影单独包裹
真正要还原物理级倒影，没有“一行 CSS 解决”的办法；能省事的只有放弃精度换兼容性，或者接受 JS/CSS 组合的近似效果。选哪条路，取决于你是否允许倒影在 Safari 15.2 和 Chrome 43 上完全消失。
