当前位置：首页 > CSS

css制作倒影

2026-04-01 09:36:50CSS

使用 `-webkit-box-reflect` 属性

-webkit-box-reflect 是 WebKit 浏览器（如 Chrome、Safari）提供的专有属性，可直接为元素生成倒影。语法如下：

.element {
  -webkit-box-reflect: below 10px linear-gradient(transparent, rgba(0, 0, 0, 0.3));
}

参数说明：
- below：倒影方向（可选 above/below/left/right）。
- 10px：倒影与元素的间距。
- linear-gradient：可选的遮罩效果，控制倒影渐变透明度。

通过伪元素模拟倒影

通用方案，适用于所有浏览器。利用 ::after 伪元素和 CSS 变换实现：

.element {
  position: relative;
}
.element::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  transform: scaleY(-1) translateY(5px);
  opacity: 0.5;
  filter: blur(2px);
}

关键点：
- transform: scaleY(-1) 垂直翻转元素。
- filter: blur() 增加模糊效果模拟真实倒影。
- opacity 调整透明度增强层次感。

结合 SVG 滤镜

通过 SVG 创建复杂倒影效果（如波纹扭曲）：

<svg height="0" width="0">
  <filter id="reflect">
    <feGaussianBlur stdDeviation="1" />
    <feComponentTransfer>
      <feFuncA type="linear" slope="0.5" />
    </feComponentTransfer>
  </filter>
</svg>

<style>
.element {
  filter: url(#reflect);
  transform: scaleY(-1);
}
</style>

动态倒影与交互

通过 CSS 变量实现悬停效果增强：

css制作倒影

.element {
  --reflect-opacity: 0.3;
  --reflect-blur: 2px;
  -webkit-box-reflect: below 0px linear-gradient(transparent, rgba(0,0,0,var(--reflect-opacity)));
  filter: blur(var(--reflect-blur));
  transition: all 0.3s;
}
.element:hover {
  --reflect-opacity: 0.6;
  --reflect-blur: 4px;
}