如何使用 HTML 和 CSS 创建反射效果？

在设计网站时，常常需要添加一些反射效果来让页面更具有立体感，这时候我们可以使用 HTML 和 CSS 来实现这个效果。

利用伪元素

我们可以利用 CSS 中的伪元素 ::before 和 ::after 来实现反射效果。

首先，我们需要给需要添加反射效果的元素设置 position:relative;，然后给它添加一个伪元素，并设置它的样式。这里假设我们需要在一张图片上添加倒影效果：

.img-container {
  position: relative;
}

.img-container::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -20px;
  width: 100%;
  height: 20px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.5)
  );
  transform: scaleY(-1);
}

在上面的代码中，我们首先设置了 .img-container 的 position:relative;，然后给它添加了一个伪元素 ::after。在伪元素的样式中，我们设置了它的 content:"";，并将 position 设置为 absolute;，这样就可以让伪元素脱离文档流，并绝对定位。

接着，我们设置了伪元素的左边框距离父元素的左边框为 0，底部距离父元素的底部为 -20px，宽度为 100%，高度为 20px，这样伪元素就成了原图像的下方一条宽度和原图相等的带渐变色的矩形。

最后，我们将伪元素的 transform 设置为 scaleY(-1)，这样它就会被翻转，并成为原图的倒影。

完整代码如下：

<div class="img-container">
  <img src="https://picsum.photos/id/1003/300/300?grayscale" alt="" />
</div>

.img-container {
  position: relative;
}

.img-container::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -20px;
  width: 100%;
  height: 20px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.5)
  );
  transform: scaleY(-1);
}

效果如下：

利用 SVG

除了利用伪元素，我们也可以使用 SVG 来创建反射效果。这种方法可以让我们灵活地控制倒影的形状和样式，同时也不会产生冗余的 HTML 元素。

下面是一个例子，假设我们需要在一张图片上添加一个带有 borderRadius 的倒影效果：

<div class="container">
  <svg width="100%" height="100%" viewBox="0 0 1 1">
    <defs>
      <mask id="mask">
        <rect x="0" y="0" width="1" height="1" fill="white" />
        <rect x="0" y="0.5" width="1" height="0.5" fill="black" />
        <circle cx="0.5" cy="0.5" r="0.5" fill="white" />
      </mask>
    </defs>
    <image href="https://picsum.photos/300/300" width="100%" height="100%" mask="url(#mask)" />
    <rect x="0" y="0" width="1" height="1" fill="url(#gradient)" />
  </svg>
</div>

.container {
  position: relative;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  overflow: hidden;
}

.container svg {
  position: absolute;
  left: 0;
  top: 0;
  transform: scale(1, -1);
}

.container rect {
  fill-opacity: 0.3;
}

#gradient stop:first-child {
  stop-opacity: 0.6;
}

#gradient stop:last-child {
  stop-opacity: 0;
}

在上面的代码中，我们首先将需要添加倒影效果的元素包裹在一个容器中，并将容器的 border-radius 设置为 50%，以实现圆形效果。

然后，我们通过 SVG 中的 mask 和 image 元素创建了图片的倒影效果。在 mask 中，我们分别创建了一个白色的矩形、一个黑色的矩形和一个白色的圆形，这些形状将决定倒影效果的形状。

在 image 元素中，我们设置了图片的宽度和高度为 100%，并将 mask 属性设置为刚刚创建的 mask。这样，图片的上半部分将会被遮挡，只显示下半部分，从而实现了倒影效果。

最后，我们在 SVG 中创建了一个渐变，用来让倒影效果逐渐消失。具体来说，我们通过 stop 元素的 stop-opacity 属性控制了渐变的透明度，从而将倒影的底部逐渐变为透明。

完整代码如下：

<div class="container">
  <svg width="100%" height="100%" viewBox="0 0 1 1">
    <defs>
      <mask id="mask">
        <rect x="0" y="0" width="1" height="1" fill="white" />
        <rect x="0" y="0.5" width="1" height="0.5" fill="black" />
        <circle cx="0.5" cy="0.5" r="0.5" fill="white" />
      </mask>
      <linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1">
        <stop offset="0%" stop-color="black" />
        <stop offset="100%" stop-color="black" />
      </linearGradient>
    </defs>
    <image href="https://picsum.photos/300/300" width="100%" height="100%" mask="url(#mask)" />
    <rect x="0" y="0" width="1" height="1" fill="url(#gradient)" />
  </svg>
</div>

.container {
  position: relative;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  overflow: hidden;
}

.container svg {
  position: absolute;
  left: 0;
  top: 0;
  transform: scale(1, -1);
}

.container rect {
  fill-opacity: 0.3;
}

#gradient stop:first-child {
  stop-opacity: 0.6;
}

#gradient stop:last-child {
  stop-opacity: 0;
}

效果如下：

小结

以上就是两种实现反射效果的方法，它们都有各自的优劣。利用伪元素的方法可以让我们更容易地控制倒影效果的位置和大小，同时也不会产生冗余的 HTML 元素。利用 SVG 的方法可以让我们更灵活地控制倒影效果的形状和样式，同时对于需要添加大量倒影效果的页面，也可以减少 HTML 元素的数量。具体使用哪种方法，可以根据实际情况进行选择。