在设计中，反射是对象的风格化镜像。 尽管它们不像阴影那样流行，但它们也有其闪光点——想想您第一次在 MS Word 或 PowerPoint 中探索不同的字体格式：我敢打赌，反射是您使用频率第二高的样式，仅次于阴影，其他样式如轮廓和发光则被忽略。 或者，您可能还记得，在苹果几乎在所有东西上都使用反射效果的时候，反射曾一度风靡一时。

反射仍然很酷！ 并且与过去不同的是，我们现在可以使用 CSS 来创建反射效果！ 以下是我们在本文中将要创建的内容

反射设计分两个步骤

1. 创建原始设计的副本。
2. 设置该副本的样式。

现在，在 CSS 中获取镜像的最真实和标准化的方法是使用 element() 属性。 但它仍处于实验阶段，截至撰写本文时，仅在 Firefox 中受支持。 如果您好奇，可以 查看我撰写的一篇关于它的文章，其中对其进行了实验。

因此，我将使用两个相同的设计，而不是使用 element()，并将其中一个用作我示例中的反射效果。 您可以使用 JavaScript 将此部分编码为动态的，或者使用伪元素，但在我的演示中，我每个设计都使用了一对相同的元素。

<div class="units">
  <div>trinket</div>
  <div>trinket</div>
</div>

.units > * {
  background-image: url('image.jpeg');
  background-clip: text;
  color: transparent;
  /* etc. */
}

原始设计是一个敲除文本图形，由背景图像、透明文本颜色和 background-clip 属性及其 text 值的组合创建。

然后将这对元素的底部元素翻转并使用 transform 移动到原始设计附近。 这就是反射效果。

.units > :last-child {
  transform: rotatex(180deg) translatey(15px); 
}

现在翻转的底部元素将采用一些样式来在反射效果上创建渐变和其他图形效果。 可以使用用作翻转元素的蒙版层的线性渐变图像来实现反射效果的渐变淡出。

.units > :last-child {
  transform: rotatex(180deg) translatey(15px); 
  mask-image: linear-gradient(transparent 50%, white 90%);
}

默认情况下，mask-mode 的 mask-image 属性为 alpha。 这意味着，当图像用作元素的蒙版层时，图像的透明部分也会将其对应的元素区域变为透明。 这就是为什么带有顶部透明渐变的 linear-gradient 会在末端淡出上下翻转的反射效果。

我们还可以尝试其他渐变样式，可以单独使用也可以组合使用。 例如，使用条纹的渐变。 我添加了图案以及之前的淡出效果。

.units > :last-child {
  /* ... */
  mask-image: 
    repeating-linear-gradient(transparent, transparent 3px, white 3px, white 4px),
    linear-gradient( transparent 50%, white 90%);
}

或者使用 radial-gradient 的渐变。

.units > :last-child {
  /* ... */
  mask-image: radial-gradient(circle at center, white, transparent 50%);
}

另一个想法是通过向 transform 属性添加 skew() 来变形镜像。 这会给反射效果带来一些运动。

.units > :last-child {
  /* ... */
  transform: rotatex(180deg) translatey(15px) skew(135deg) translatex(30px);
}

当您需要反射效果更微妙，更像阴影时，模糊它、使其变亮或降低其不透明度就可以达到效果。

.units > :last-child {
  /* ... */
  filter: blur(4px) brightness(1.5);
}

有时反射本身也可能像阴影一样，因此，我没有使用背景图像（来自原始设计）或块颜色来显示文本，而是尝试为反射效果提供一系列半透明的红色、蓝色和绿色阴影，这些颜色与原始设计搭配得很好。

.units > :last-child {
  /* ... */
  text-shadow: 
    0 0 8px rgb(255 0 0 / .4),
    -2px -2px 6px rgb(0 255 0 / .4),
    2px 2px 4px rgb(0 255 255 / .4);
}

这些 rgb() 值看起来很奇怪吗？ 这是一个新的语法，是 一些令人兴奋的新 CSS 颜色功能 的一部分。

让我们在一个大型演示中将所有这些方法结合起来

总结

良好反射效果的关键在于使用比主要对象更微妙的效果，但又不能过于微妙以至于难以察觉。 然后还有其他考虑因素，包括反射效果的颜色、方向和形状。

希望您能从本文中获得一些灵感！ 当然，我们这里只关注文本，但反射效果可以很好地用于设计中任何醒目的元素，这些元素周围有足够的空间，并且可以通过反射效果来提升其在页面上的视觉效果。