CSS 阴影效果

CSS 阴影效果可以为元素添加可视化的深度和立体感。CSS 支持多种阴影效果，包括投影、描边和浮雕等效果。本文将为您介绍如何使用 CSS 创建阴影效果。

实现方式

box-shadow

box-shadow 属性可以用来为元素添加投影效果。该属性支持多个值，用逗号隔开。

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

• h-shadow： 必需。水平阴影的位置。可以为正值（右侧）或负值（左侧）。
• v-shadow： 必需。垂直阴影的位置。可以为正值（下方）或负值（上方）。
• blur： 可选。模糊距离。
• spread： 可选。阴影的大小。
• color： 可选。阴影的颜色。默认颜色为黑色。
• inset： 可选。将阴影设为内部阴影（即在元素背面）。

例如，以下代码将为元素添加 10px 的水平投影、20px 的垂直投影、10px 的模糊距离、6px 的阴影大小和蓝色的阴影颜色：

box-shadow: 10px 20px 10px 6px blue;

您可以将 h-shadow 和 v-shadow 设置为 0，以仅设置 blur 和 spread。也可以将 blur 和 spread 设置为 0，以仅设置 h-shadow 和 v-shadow。

text-shadow

text-shadow 属性可以为文本添加描边效果。该属性支持多个值，用逗号隔开。

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

• h-shadow： 必需。水平描边的位置。可以为正值（右侧）或负值（左侧）。
• v-shadow： 必需。垂直描边的位置。可以为正值（下方）或负值（上方）。
• blur： 可选。模糊距离。
• color： 可选。描边的颜色。默认颜色为黑色。

例如，以下代码将为元素的文本添加 1px 的水平描边、2px 的垂直描边、3px 的模糊距离和红色的描边颜色：

text-shadow: 1px 2px 3px red;

示例代码

box-shadow

<div class="box">
  This is a box with shadow.
</div>

.box {
  width: 200px;
  height: 100px;
  background: #fff;
  box-shadow: 10px 20px 10px 6px blue;
}

text-shadow

<h1>This is a heading with shadow.</h1>

h1 {
  text-shadow: 1px 2px 3px red;
}

结语

以上就是使用 CSS 实现阴影效果的方法。在实际开发中，为了提高性能，建议使用较简单的阴影样式。