CSS 设置渐变阴影

这期视频分享一个 CSS 小技巧，设置渐变阴影。大体思路是：

• 给要设置渐变阴影的元素，创建一个 before 伪元素。
• before 伪元素的背景色设置为渐变色。
• 使用 filter 属性对 before 伪元素进行模糊处理。

我们来看一下具体怎么实现。

定义 HTML

我们这里的 HTML 代码很简单，有一个 main 元素，包含一个需要添加渐变阴影的 div 盒子，把它的 class 设置为 box，方便后面设置样式：

<main>
  <div class="box"></div>
</main>

整体样式

对于整体的样式，这里就不详细介绍了，就是把背景设置为了灰黑色，然后把 div 盒子放到了屏幕中央：

body {
  background: hsl(0deg, 0%, 8%);
}

main {
  width: 100vw;
  height: 100vh;
  max-width: 100%;
  display: grid;
  place-items: center;
}

设置盒子样式

我们先把这个 div 端样式设置一下：

• 宽度 350px
• 高度 500px
• 背景色为紫色。
• 圆角 8px。
• 相对定位。

.box {
  width: 350px;
  height: 500px;
  background: hsl(280deg, 100%, 50%);
  border-radius: 8px;
  position: relative;
}

设置渐变阴影

接下来设置 box 的渐变阴影，使用.box::before 创建一个伪元素：

• 内容设置为空，这样伪元素才能显示出来。
• 再设置为绝对定位， 设置 top 为 0、left 为 0 放到左上角，宽度设置为 100%、高度为 100%，这样这个伪元素就和.box 一样大小了，因为 .box 设置了相对定位，这个伪元素的绝对定位就会在 .box 内部布局。
• 之后给它设置渐变的背景色，这里设置了 3 个颜色，以及 45 度倾斜。
• 后面设置圆角也是 8 px。
• 下面是重点，添加一个 filter 属性，使用 blur 函数对 before 伪元素进行模糊处理，模糊半径为 24px。
• 这个时候 before 伪元素是盖在.box 的上面的，我们再把它的 z-index 设置为 -1，放到底下。

.box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    45deg,
    hsl(300deg, 100%, 50%),
    hsl(200deg, 100%, 50%),
    hsl(100deg, 100%, 50%)
  );
  border-radius: 8px;
  filter: blur(24px);
  z-index: -1;
}

这样，就完成了渐变阴影的展示，为了让阴影展示的更好看一些，我们可以把 box 的背景色设置成和 body 的背景色一样：

.box {
  background: hsl(0deg, 0%, 8%);
}

这样，.box 就像是一块带阴影的区域，可以在里边写点文字或者放点图片。

小结

好了，这就是使用 CSS 设置渐变阴影的过程，你学会了吗？如果有帮助请三连，想学更多有用的前端开发知识，请关注峰华前端工程师，感谢观看！