如何使用 CSS 对文本应用阴影效果

在网页设计中，经常会用到阴影效果来增强页面的视觉效果。而 CSS 可以很方便地实现对文本的阴影效果。本文将介绍如何使用 CSS 对文本应用阴影效果。

1. text-shadow 属性

text-shadow 属性可以在文本周围创建阴影。它接受一组逗号分隔的参数，以定义阴影的颜色、偏移量和模糊半径。

1.1 基本语法

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

• h-shadow：水平阴影的位置。可以是正数或负数，正数表示向右，负数表示向左。例如，值为 5px 表示阴影向右偏移 5 个像素，值为 -5px 表示阴影向左偏移 5 个像素。
• v-shadow：垂直阴影的位置。可以是正数或负数，正数表示向下，负数表示向上。例如，值为 5px 表示阴影向下偏移 5 个像素，值为 -5px 表示阴影向上偏移 5 个像素。
• blur-radius：表示阴影的模糊半径。值越大，阴影越模糊。如果值为 0，则阴影边缘非常清晰。
• color：表示阴影的颜色。可以使用任何 CSS 颜色值。

1.2 示例代码

<p class="shadow-text">Hello World</p>

.shadow-text {
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

上述代码将在 "Hello World" 文字周围创建一个黑色、5 像素模糊半径的阴影，阴影向右偏移 2 个像素，向下偏移 2 个像素。

2. box-shadow 属性

除了用于文本阴影，box-shadow 属性还可以用于元素的阴影。它也接受一组逗号分隔的参数，以定义阴影的颜色、偏移量、模糊半径和展开半径。

2.1 基本语法

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

• h-shadow、v-shadow、blur-radius：与 text-shadow 属性的含义相同。
• spread-radius：展开半径。如果设置为正数，则阴影比元素大。如果设置为负数，则阴影在元素内部。
• color：与 text-shadow 属性的含义相同。

2.2 示例代码

<div class="shadow-box">Box Shadow</div>

.shadow-box {
  box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.5);
}

上述代码将在 "Box Shadow" 周围创建一个黑色、5 像素模糊半径的阴影，阴影向右偏移 2 个像素，向下偏移 2 个像素，并且展开半径为 2 像素。

3. 总结

本文介绍了如何使用 CSS 实现文本和元素阴影效果。掌握该技能对于网页设计是很有帮助的，建议在实践中多加练习。