如何使用 CSS 为文本添加阴影？

在网页设计中，我们常常需要为文本添加阴影效果，以增强页面的美观度和可读性。在 CSS 中，我们可以使用 text-shadow 属性来实现文本阴影效果。

语法

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

该属性接受 4 个参数：

• h-shadow：必需，表示阴影水平方向的偏移值，可以是正数、负数或 0；
• v-shadow：必需，表示阴影垂直方向的偏移值，可以是正数、负数或 0；
• blur-radius：可选，表示阴影的模糊半径，数值越大阴影越模糊，可以是正数或 0；
• color：可选，表示阴影的颜色，可以是颜色名、十六进制值或 RGB 值。

示例

/* 添加黑色带模糊的文本阴影 */
h1 {
  text-shadow: 1px 1px 2px black;
}

/* 添加红色带模糊的文本阴影 */
h2 {
  text-shadow: 0 0 5px #FF0000;
}

/* 添加黑色不带模糊的文本阴影 */
h3 {
  text-shadow: 1px 1px black;
}

注意事项

• 不要过度使用文本阴影，否则会影响页面的可读性；
• 某些移动设备对于 text-shadow 的支持性不太好，应根据具体情况进行使用。