灏天阁

设置渐变阴影

· Yin灏

设置渐变阴影，大体思路是：

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

我们这里的 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 就像是一块带阴影的区域，可以在里边写点文字或者放点图片。

- Book Lists -