在设计中，反射是物体的风格化镜像。尽管它们不像阴影那样流行，但也有它们的时候--只要想想你第一次在MS Word或PowerPoint中探索不同的字体格式时：我打赌反射是你使用最多的第二种样式，仅次于阴影，而放弃了其他像轮廓和发光的样式。也许你还记得，当苹果公司在所有的东西上都使用反射时，反射是风靡一时的。

Old iPod Touch product image showing the front, back, and profile of the device with subtle reflections beneath each.

反光仍然很酷与过去不同的是，我们确实可以用CSS来做反射。下面是我们在本文中要做的事情。

反射设计有两个步骤。

创建一个原始设计的副本。
为该副本设计样式。

现在在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%);
}

CodePen Embed Fallback

或者这个有radial-gradient 。

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

CodePen Embed Fallback

另一个想法是通过添加skew() 到transform 属性来变形镜面图像。这给了反射一些运动。

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

CodePen Embed Fallback

当你需要反射是微妙的，更像是一个阴影，然后模糊它，提亮它，或减少它的不透明度，可以做到这一点。

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

CodePen Embed Fallback

有时，反射本身也可以是朦胧的，所以，我没有使用背景图片（来自原始设计）或文字的块状颜色，而是尝试给反射一系列半透明的红、蓝、绿颜色的阴影，与原始设计很好地结合。

.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颜色功能的一部分。

CodePen嵌入回退

让我们把所有这些方法集中在一个大的演示中。

CodePen 嵌入回退

结束语

一个好的反射的关键是使用比主要对象更微妙的效果，但又不至于微妙到难以注意。然后还有其他考虑，包括反射的颜色、方向和形状。

我希望你能从中得到一些启发!当然，我们在这里看到的都是文字，但是反射可以很好地用于设计中的任何引人注目的元素，这些元素周围有足够的空间，并且可以从反射中受益，以提升其在页面中的地位。

如何用CSS创建逼真的反射（附实例）

结束语