使用 CSS 创建玻璃效果（3 种方法和样式）

由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！

人类朋友们，你们好！

在本文中，我将演示三种使用 CSS 创建玻璃效果的方法。先简单介绍一下背景：我多年来一直在创建玻璃风格的网站，因为我个人非常喜欢这种风格，但它似乎直到最近才在现代网络上流行起来。看起来每个人都想赶上这股潮流，所以我想……何乐而不为呢？

在 CSS 中创建玻璃效果，我通常使用两种主要方法，稍后我会演示。不过，还有第三种方法，你可能之前没有考虑过。使用这种方法，你可以为玻璃效果添加一些“光泽”，尤其是在与其他两种方法结合使用时。

遗憾的是，第三种方法存在一些问题，稍后我会解释。

关于在设计中使用玻璃材质的一点说明：

“玻璃”效果，或者至少是模拟玻璃效果的效果，非常时尚且赏心悦目，但只有搭配合适的背景才能发挥其作用。模拟“玻璃”效果需要运用对比，这有利于提高可视性，但如果您不了解自己在做什么，或者考虑不周，就很容易出错。

也就是说，至少在我看来，“玻璃”图案与对比鲜明的渐变色、纯色深色背景（阴影外凸）、浅色背景（阴影内凹）以及照片搭配使用时，效果往往最佳：

现在让我们进入有趣的部分——编码。

本教程中所有示例均采用以下样式：

按照我的惯例，我不喜欢写一篇使用自定义视觉效果却不解释我是如何做的教程，所以这里简单介绍一下。

我有3个元素divs，它们的样式属性都相同：

div {
  align-items: center;
  background-color: rgba(35, 35, 35, 0.1);
  border: 1px solid rgba(235, 235, 235, 0.1);
  border-radius: 15px;
  color: white;
  display: flex;
  font-size: clamp(12px, 3vw, 2rem);
  font-weight: 300;
  letter-spacing: .375ch;
  justify-content: center;
  height: 27.35vh;
  margin: auto;
  position: relative;
  text-transform: uppercase;
  width: 27.35vw;
}

它们都使用 Flexbox 布局在文档主体中，body 元素的高度设置为100vh（view-height），背景图像使用线性渐变：

body {
  align-items: center;
  background-image: linear-gradient(rgb(105, 35, 135), rgb(75, 35, 95), rgb(35, 48, 135));
  background-attachment: fixed;
  background-size: cover;
  display: flex;
  justify-content: space-around;
  margin: 0;
  padding: 0;
  height: 100vh;
}

方法一：使用“box-shadow:”和“background-color:”

.glass0 {
  box-shadow: inset 0 0 15px rgba(135, 135, 135, .1), 0 0 18px 3px rgba(0, 0, 0, .3);
}

这是最直接的方法，你可能已经见过很多次了。它的结构很简单，但如果与合适的审美相结合，效果却出奇地好：

你可以通过省略第一个阴影（带内嵌效果）来获得“透明玻璃”效果，也可以通过调整阴影样式来获得不同的效果。无论哪种方法，它都快速简便，并且能带来不错的效果。

方法二——使用伪元素filter: blur()

这种方法虽然用途广泛，但如果过度使用，确实会带来性能问题。在这种情况下，我们的做法是将一个伪元素（::after或::before）放置在主元素（本身也可以设置为类似玻璃的样式）后面。

代码：

.glass1 {
  box-shadow: 0 0 18px 3px rgba(0, 0, 0, .3);
}

.glass1::after {
  background-color: rgba(195, 195, 195, .1);
  bottom: 10px;
  content: '';
  filter: blur(32px);
  left: 10px;
  opacity: .5;
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: -1;
}

注： 我写了一篇更详细的指南（解释了这种方法的原理），链接如下：https://dev.to/rolandixor/achieving-backdrop-blur-without-backdrop-filter-16ii

真实案例：玻璃制造商

方法三——模拟光泽

这种方法在实现上最为复杂。除非你天生数学好，否则需要反复测试才能掌握。它的效果很棒，响应也很快，但如果你使用百分比或屏幕尺寸来确定位置，可能需要一些帮助。

代码：

.glass2 {
  box-shadow: 0 0 18px 3px rgba(0, 0, 0, .3);
}

.glass2::after {
  background-color: rgba(255, 255, 255, .6);
  bottom: 49.65%;
  content: '';
  filter: blur(8px);
  left: .865%;
  position: absolute;
  right: .865%;
  top: 49.65%;
  transform: rotate(-45deg) skewX(20deg);
  z-index: -1;
}

我还没在实际应用中使用过这种方法，但它的效果应该相当不错。不过，根据你想要达到的效果，你可能需要稍微调整一下。

请注意：本教程中
我 没有使用* backdrop-filter: blur();。虽然它很酷，也能产生令人兴奋的效果，但在撰写本文时，Firefox 尚不支持它。在 Safari 和其他基于 Webkit 内核的浏览器中，它仍然只能通过前缀来使用。我在这里使用的方法应该适用于所有现代浏览器。

今天就到这里！

你会注意到第三种方法需要一些调整才能正确扩展，但别担心，我将来可能会修复它。

您可以在 CodePen 上找到此示例的代码，链接如下：https://codepen.io/rolandixor/pen/dyRBOxO

你可以在评论区分享你的结果，我很期待看到你的发现！