CSS 字体添加阴影可增强文本可读性和视觉吸引力，步骤如下：使用 text-shadow 属性指定水平偏移量、垂直偏移量、模糊半径和阴影颜色。示例语法：h1 { text-shadow: 2px 2px 5px #333; }，创建黑色阴影，水平偏移量为 2px，垂直偏移量为 2px，模糊半径为 5px。可创建多个阴影，每个阴影对应 text-shadow 属性中的四个值。inset 关键字可将阴影投影到相反方向。大多数现代浏览器支持 text-shadow 属性，旧浏览器需使用 vendor-
如何为 CSS 字体添加阴影
为 CSS 字体添加阴影是一种常见的技术，可以增强文本的可读性和视觉吸引力。以下步骤将指导你如何实现这一效果：
1. 使用文本阴影属性
使用 text-shadow 属性为字体添加阴影。该属性接受四个值：
立即学习“前端免费学习笔记（深入）”；
- 水平偏移量：阴影在水平方向上的偏移量，以像素为单位（正值向右，负值向左）。
- 垂直偏移量：阴影在垂直方向上的偏移量，以像素为单位（正值向下，负值向上）。
- 模糊半径：阴影的模糊程度，以像素为单位。越大，阴影越模糊。
- 阴影颜色：阴影的颜色，可以是十六进制颜色值、RGB 值或颜色名称（如 "black"）。
2. 示例语法
以下示例将文本阴影添加到 元素：
h1 {
text-shadow: 2px 2px 5px #333;
}此示例将创建黑色阴影，水平偏移量为 2px，垂直偏移量为 2px，模糊半径为 5px。
3. 多个阴影
你可以通过在 text-shadow 属性中指定多个值来创建多个阴影。每个值的四个值对应一个阴影。
例如，以下示例创建两个阴影，一个黑色，偏移量为 2px，另一个蓝色，偏移量为 5px：
h1 {
text-shadow: 2px 2px 5px #333, 5px 5px 10px #0000ff;
}4. 自定义方向
默认情况下，阴影呈 45 度角投影。你可以使用 text-shadow 属性的 inset 关键字将阴影投影到相反的方向。
h1 {
text-shadow: inset 0 0 5px #333;
}此示例将创建向内投影的黑色阴影。
5. 浏览器兼容性
大多数现代浏览器都支持 text-shadow 属性。但是，对于旧浏览器，你需要使用 vendor-specific 前缀（如 -webkit-text-shadow）。
