-webkit-box-reflect仅限WebKit/Blink浏览器支持，非标准实验属性；语法为-webkit-box-reflect: below 10px；需作用于有内容的块级元素，禁用overflow: hidden及触发层叠上下文的父样式。
倒影不显示？检查 -webkit-box-reflect 的浏览器支持和基础语法
这个属性只在基于 WebKit/Blink 的浏览器里有效（Chrome、Edge、Safari），Firefox 和旧版 IE 完全不认。它也不是 CSS 标准属性，属于实验性前缀特性，所以别指望它跨所有环境稳定工作。
基本写法是：div { -webkit-box-reflect: below 10px; }，其中 below 是方向，10px 是倒影与原图的间距。方向还支持 above、left、right，但实际用得最多的是 below。
- 必须作用在有内容（比如图片、文字）的块级元素上，空
div加了也没反应 - 元素不能设
overflow: hidden，否则倒影会被直接裁掉 - 如果父容器有
transform或opacity < 1，可能触发层叠上下文，导致倒影消失或错位
倒影模糊/透明度不对？用 mask-image 配合渐变控制衰减
-webkit-box-reflect 自身不提供模糊或透明度调节，它只是“复制+翻转+拼接”。要让倒影自然淡出，得靠 mask-image（同样 WebKit 专属）叠加线性渐变遮罩。
典型组合写法：
立即学习“前端免费学习笔记（深入）”；
img {
-webkit-box-reflect: below 0;
-webkit-mask-image: linear-gradient(to bottom, transparent, black 60%);
}
-
mask-image的渐变方向必须和below一致，否则淡出位置反了 - 不要用
rgba()或opacity模拟淡出——那会同时影响原图和倒影 - Safari 15.4+ 对
mask-image支持更稳；Chrome 有时需加-webkit-mask全写
图片倒影变形或错位？优先用 <img> 而非背景图
用 background-image + -webkit-box-reflect 很容易出问题：倒影会按 background-size 渲染，但翻转逻辑仍基于元素盒模型，尺寸一变就错位。
- 坚持用
<img src="...">标签，让倒影直接基于图像原始宽高计算 - 避免给
img设width: 100%同时又用object-fit: cover——这会让渲染像素和几何尺寸脱节 - 如果必须响应式，用
max-width: 100%+height: auto更安全
需要兼容 Firefox 或现代标准？别硬扛，换 Canvas 或 SVG 方案
真要全浏览器支持倒影，-webkit-box-reflect 就不是解。它没标准化，W3C 也无意收编。强行 polyfill 成本远高于替代方案。
- Canvas 方案：用
ctx.translate()+ctx.scale(1, -1)手动绘制翻转图，再叠加渐变遮罩 - SVG 方案：把图片嵌入
<svg>，用<feGaussianBlur>和<feOffset>做带模糊的倒影，兼容性好且可控 - 服务端生成：对静态图，直接出一张含倒影的 PNG，最省事也最稳
WebKit 前缀属性的坑在于：它看起来简单，但一旦涉及缩放、动画、混合模式或跨浏览器交付，边界情况多到查不到文档。能不用，就别把它当主方案。
