使用 CSS 创建衰减阴影

什么是衰减阴影？

首先我们先来了解一下什么是阴影。阴影是通过在元素后面添加一个不同颜色的阴影形成的效果，可以使元素看起来更加逼真。而衰减阴影指的就是阴影颜色逐渐消失，产生渐变效果。举个例子，我们可以通过在一个文本框的底部添加衰减阴影，使得文本框和页面融合在一起，而不是看起来像是浮在页面上方。

如何使用 CSS 创建衰减阴影？

在 CSS3 中，我们可以使用 box-shadow 属性来实现阴影效果，其中第四个参数用来定义阴影的模糊半径，控制阴影的强度和柔和程度。我们可以利用这个参数来创建衰减阴影。

使用线性渐变实现衰减阴影

我们可以使用 CSS 中的 linear-gradient() 函数来创建线性渐变。该函数有两个参数，第一个是渐变的方向，第二个是定义渐变颜色和渐变位置的字符串。

举个例子，下面的 CSS 代码会在一个 <div> 元素下方添加一个从白色到透明的衰减阴影：

.shadow {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.6);
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}

这段代码利用了 box-shadow 属性来添加一个半径为 16px 的黑色阴影，并使用 background-image 属性来添加一个白色到透明的线性渐变背景。通过调整透明的渐变颜色，我们可以实现衰减效果。

使用多个阴影层实现衰减阴影

除了使用线性渐变，我们还可以使用多个阴影层来模拟衰减效果。我们可以使用透明度逐渐降低的阴影层，来模拟阴影颜色逐渐消失的效果。

下面是使用多个阴影层实现衰减阴影的 CSS 代码示例：

.shadow {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.1),
              0 16px 32px 0 rgba(0, 0, 0, 0.3),
              0 32px 64px 0 rgba(0, 0, 0, 0.5),
              0 64px 128px 0 rgba(0, 0, 0, 0.7);
}

该代码使用了四个阴影层，每个阴影层的颜色都比上一个层次要透明，从而产生了衰减效果。

总结

通过使用 CSS3 中的 box-shadow 属性，我们可以很容易地创建阴影，而通过调整阴影半径和阴影层数量，可以实现不同的阴影效果，包括衰减阴影。