CSS怎样实现图片镜像倒影效果？box-reflect属性怎么用

CSS的box-reflect属性是实现图片镜像倒影效果的高效方案，它可以直接为元素生成对应的倒影副本，无需手动创建额外的DOM节点或者叠加多层伪元素，大幅简化了倒影效果的实现流程。该属性目前主要被WebKit内核的浏览器支持，包括Chrome、Safari等，使用时可以根据需求调整倒影的方向、与主体的间距以及遮罩效果。

box-reflect属性基础语法

box-reflect属性的完整语法格式如下：

/* 语法结构 */
box-reflect: 方向 偏移距离 遮罩;

各个参数的具体含义如下：

• 方向：必填参数，可选值为above（上方倒影）、below（下方倒影）、left（左侧倒影）、right（右侧倒影），用来控制倒影生成的位置。
• 偏移距离：可选参数，支持所有CSS长度单位，比如px、em、rem等，用来设置倒影和主体元素之间的间距，默认值为0。
• 遮罩：可选参数，用来设置倒影的渐变遮罩或者图片遮罩，让倒影呈现渐变消失的效果，默认倒影是完全不透明的。

基础图片倒影实现示例

下面给一张图片添加下方镜像倒影，先准备基础的HTML结构：

<div class="img-container">
  <img src="https://ipipp.com/sample.jpg" alt="示例图片" class="reflect-img">
</div>

对应的CSS样式代码如下，给图片添加下方倒影，倒影和图片间距为10px：

.reflect-img {
  width: 300px;
  height: 200px;
  /* 下方倒影，间距10px，无遮罩 */
  -webkit-box-reflect: below 10px;
  box-reflect: below 10px;
}

如果需要添加渐变遮罩，让倒影从上到下逐渐透明，可以修改遮罩参数：

.reflect-img {
  width: 300px;
  height: 200px;
  /* 下方倒影，间距10px，线性渐变遮罩 */
  -webkit-box-reflect: below 10px linear-gradient(transparent 0%, rgba(255,255,255,0.6) 100%);
  box-reflect: below 10px linear-gradient(transparent 0%, rgba(255,255,255,0.6) 100%);
}

不同方向的倒影效果

box-reflect支持四个方向的倒影，下面是四个方向的示例代码：

/* 上方倒影 */
.reflect-above {
  -webkit-box-reflect: above 8px;
  box-reflect: above 8px;
}
/* 下方倒影 */
.reflect-below {
  -webkit-box-reflect: below 8px;
  box-reflect: below 8px;
}
/* 左侧倒影 */
.reflect-left {
  -webkit-box-reflect: left 8px;
  box-reflect: left 8px;
}
/* 右侧倒影 */
.reflect-right {
  -webkit-box-reflect: right 8px;
  box-reflect: right 8px;
}

注意事项

• box-reflect属性目前还不是CSS标准属性，所以需要添加-webkit-前缀来兼容WebKit内核浏览器，其他内核浏览器暂时不支持该属性。
• 倒影会复制主体的所有样式，包括边框、阴影等，如果不需要倒影包含这些效果，需要单独调整主体的样式配置。
• 遮罩参数如果使用图片遮罩，图片路径需要正确填写，且遮罩图片的尺寸会适配倒影的尺寸自动缩放。

兼容性处理方案

如果需要兼容不支持box-reflect属性的浏览器，可以使用伪元素模拟倒影效果，示例代码如下：

.img-container {
  position: relative;
  width: 300px;
  height: 200px;
}
.img-container img {
  width: 100%;
  height: 100%;
  display: block;
}
/* 伪元素模拟下方倒影 */
.img-container::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(https://ipipp.com/sample.jpg);
  background-size: cover;
  transform: scaleY(-1);
  margin-top: 10px;
  mask-image: linear-gradient(transparent 0%, rgba(255,255,255,0.6) 100%);
  -webkit-mask-image: linear-gradient(transparent 0%, rgba(255,255,255,0.6) 100%);
}

这种方式虽然代码量更多，但是可以兼容更多浏览器，开发者可以根据项目的浏览器支持需求选择合适的实现方案。

CSSbox_reflect图片镜像倒影修改时间：2026-06-26 01:18:36