CSS box-reflect属性制作图片倒影效果教程

想为图片添加倒影效果，以增强立体感或视觉高级感？如果你的第一反应是使用CSS的box-reflect属性，那么需要了解的是，这个方案如今已不再可行。

box-reflect属性在现代前端开发中基本可以视为已“退役”。它从未被纳入CSS标准，仅仅是WebKit内核早期的一个实验性私有属性。目前，Chrome从45版本起已彻底移除对其的支持，而Firefox和Edge浏览器则从未支持过它。因此，现在编写box-reflect: below;这样的代码，其效果几乎等同于一段注释。

box-reflect已废弃，仅旧版Safari支持且功能受限；推荐使用clip-path配合scaleY(-1)的伪元素方案，以实现兼容性好、可控性强的倒影效果。

为何 box-reflect 现已无法使用

即便在其“存活”时期——例如旧版Safari（iOS 7 / macOS 10.9及更早版本）——其表现也不尽如人意。它不支持渐变遮罩，无法精细控制倒影的缩放或偏移距离。更棘手的是，当与transform或filter等其他样式结合使用时，经常会出现各种奇怪的失效问题。依赖它，无异于埋下一个兼容性“地雷”。

使用 clip-path + scaleY(-1) 模拟倒影（推荐方案）

那么，可靠的方案是什么？目前业界最推荐、兼容性最佳（Chrome 55+、Firefox 54+、Safari 15.4+），且能灵活配合阴影或渐变效果的，是使用clip-path配合垂直翻转（scaleY(-1)）来模拟。

其核心思路是：为图片容器创建一个伪元素，将其垂直翻转后定位到原图下方，再利用clip-path裁剪出所需的倒影区域，最后通过透明度或遮罩实现渐隐效果。

.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设置的，或者标签本身应用了background-image。
• 如果原图是普通的标签，更稳妥的做法是放弃inherit，直接在伪元素中使用background-image: url(...)重新指定同一张图片，以避免继承失效。
• clip-path: inset()的兼容性通常优于mask-image。但如果希望倒影边缘是柔和的渐变消失，可以改用mask-image: linear-gradient(to bottom, black 60%, transparent 100%)来实现（注意在Safari中需要添加-webkit-前缀）。

使用 SVG + 制作高质量倒影

对于视觉精度要求极高的场景，例如产品展示页的横幅图，需要倒影具备模糊、位移、透明度分层等精细控制，SVG滤镜方案是更专业的选择。

定义好SVG滤镜后，在图片上直接应用即可：

• 的dy属性控制倒影的垂直偏移距离。注意，负值会使倒影向上偏移，使用时需谨慎。
• 滤镜中的slope参数可以直接调节倒影的整体透明度，这种方式比CSS的opacity更精准，尤其不会影响边缘的抗锯齿效果。
• 这个SVG滤镜定义必须直接放在页面HTML内部（不能作为外部文件链接），并且要确保其ID在页面中是唯一的，以避免冲突。

实现静态倒影本身并不复杂，真正的挑战往往出现在响应式布局中：如何让倒影效果随着图片本身的缩放而同步、协调地变化？

使用clip-path方案时，其inset()函数内的值使用百分比单位，可以相对安全地适应容器尺寸变化。但SVG滤镜方案中的stdDeviation（模糊度）和dy（偏移量）通常是固定的像素值，当图片缩放时，倒影的模糊范围和距离就可能失真，显得不协调。

面对这种情况，常见的解决思路是配合JavaScript监听页面的resize事件，动态计算并重新设置滤镜的参数。当然，如果项目对兼容性和实现复杂度有更高要求，有时也需要权衡利弊，放弃SVG方案，转而采用更易维护的CSS方案。