如何实现CSS3倒影

Epicurus
85 阅读3分钟

如何实现CSS3倒影

在 CSS3 中，可以使用 box-reflect 属性来实现元素的倒影效果。不过需要注意的是，box-reflect 是一个非标准属性，目前仅在部分浏览器（如 Chrome 和 Safari）中支持。如果需要更广泛的兼容性，可以使用伪元素或 SVG 实现类似效果。

方法一：使用 box-reflect 实现倒影

语法

box-reflect: [方向] [偏移] [遮罩];

参数说明

  1. 方向：
    • above：上方
    • below：下方
    • left：左侧
    • right：右侧
  2. 偏移：
    • 距离元素的偏移量（如 10px）。
  3. 遮罩：
    • 渐变或图片遮罩（如 linear-gradient(...)）。

示例

.reflect-box {
  width: 200px;
  height: 100px;
  background: linear-gradient(45deg, red, yellow);
  -webkit-box-reflect: below 10px linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));
}

方法二：使用伪元素实现倒影

通过伪元素模拟倒影效果，兼容性更好。

实现步骤

  1. 使用 ::after 伪元素创建倒影。
  2. 通过 transform: scaleY(-1) 实现垂直翻转。
  3. 使用渐变遮罩实现倒影的渐隐效果。

示例

.reflect-box {
  position: relative;
  width: 200px;
  height: 100px;
  background: linear-gradient(45deg, red, yellow);
}

.reflect-box::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  transform: scaleY(-1);
  opacity: 0.5;
  mask: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
  -webkit-mask: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
}

方法三：使用 SVG 实现倒影

通过 SVG 的 <filter> 和 <feGaussianBlur> 实现更复杂的倒影效果。

示例

<svg width="200" height="100">
  <defs>
    <filter id="reflect">
      <feGaussianBlur in="SourceAlpha" stdDeviation="2" />
      <feOffset dx="0" dy="10" result="offsetblur" />
      <feMerge>
        <feMergeNode in="offsetblur" />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
  </defs>
  <rect x="0" y="0" width="200" height="100" fill="red" filter="url(#reflect)" />
</svg>

方法四：使用 clip-path 和 mask 实现倒影

结合 clip-path 和 mask 实现倒影效果。

示例

.reflect-box {
  position: relative;
  width: 200px;
  height: 100px;
  background: linear-gradient(45deg, red, yellow);
}

.reflect-box::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  transform: scaleY(-1);
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
  mask: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
}

完整示例

<!DOCTYPE html>
<html>
<head>
<style>
/* 方法一：box-reflect */
.reflect-box-reflect {
  width: 200px;
  height: 100px;
  background: linear-gradient(45deg, red, yellow);
  -webkit-box-reflect: below 10px linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));
}

/* 方法二：伪元素 */
.reflect-pseudo {
  position: relative;
  width: 200px;
  height: 100px;
  background: linear-gradient(45deg, red, yellow);
}

.reflect-pseudo::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  transform: scaleY(-1);
  opacity: 0.5;
  mask: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
  -webkit-mask: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
}
</style>
</head>
<body>

<div class="reflect-box-reflect">box-reflect 倒影</div>
<div class="reflect-pseudo">伪元素倒影</div>

</body>
</html>

总结

方法兼容性适用场景
box-reflectChrome/Safari简单倒影
伪元素所有浏览器兼容性更好的倒影
SVG所有浏览器复杂倒影效果
clip-path + mask现代浏览器自定义形状倒影

根据项目需求和浏览器兼容性选择合适的方法。

更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github

avatar
文章
阅读
粉丝