CSS高级技巧: 阴影效果

阴影是 CSS 中常用的一种效果，它可以给元素增加立体感和深度，让页面看起来更加生动。本篇文章将讲解 CSS 阴影效果的几种实现方式。

box-shadow 属性

box-shadow 是 CSS3 中的属性，可以为一个元素添加阴影效果。该属性包含四个值，分别是：

box-shadow: h-shadow v-shadow blur spread color;

其中参数的含义如下：

• h-shadow：水平方向的阴影大小，可以是正数也可以是负数。
• v-shadow：垂直方向的阴影大小，可以是正数也可以是负数。
• blur：模糊半径大小，值越大阴影越模糊，默认为 0。
• spread：阴影的尺寸，可以是正数也可以是负数。正数意味着阴影扩大，负数则相反。
• color：阴影的颜色值。

下面是一个示例：

.box {
  width: 200px;
  height: 200px;
  background: #fff;
  box-shadow: 0 0 10px #666;
}

上面的代码将会给一个宽高为 200px 的白色块元素添加一个 10px 大小的模糊的黑色阴影。

text-shadow 属性

text-shadow 与 box-shadow 类似，不同之处在于 text-shadow 是给文本添加阴影效果。

text-shadow 同样包含四个值，分别是：

text-shadow: h-shadow v-shadow blur color;

其中参数的含义与 box-shadow 相似，不再赘述。以下是一个简单的示例：

h1 {
  font-size: 32px;
  text-shadow: 3px 3px 0 #555;
}

上面的代码将带有 h1 标签的文本添加了一个深灰色的阴影效果。

使用伪元素实现双重阴影

我们可以使用伪元素来实现双重阴影的效果。下面是具体的示例：

.box {
  width: 200px;
  height: 200px;
  position: relative;
}

.box::before {
  z-index: -1;
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  box-shadow: 0 0 15px #ccc;
}

.box::after {
  z-index: -2;
  content: '';
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  box-shadow: 0 0 10px #777;
}

上面的代码先是通过 .box 元素的伪元素 ::before 给该元素添加了一个 15px 的淡灰色阴影，然后再通过伪元素 ::after 给该元素添加了一个 10px 的深灰色阴影。

综上，以上是 CSS 高级技巧：阴影效果的完整攻略，希望对您有所帮助。