text-shadow 属性可为文字添加阴影，语法为：水平偏移 垂直偏移 模糊半径 阴影颜色；支持多重阴影与rgba颜色，增强视觉层次。
在css中，text-shadow 属性可以为文字添加阴影效果，增强视觉表现力。它支持多个参数来控制阴影的位置、模糊程度和颜色。
基本语法
text-shadow 的语法格式如下：
text-shadow: 水平偏移 垂直偏移 模糊半径 阴影颜色;
- 水平偏移（必填）：向右为正，向左为负
- 垂直偏移（必填）：向下为正，向上为负
- 模糊半径（可选）：值越大，阴影越模糊，默认为0（无模糊）
- 阴影颜色（可选）：不设置时浏览器通常使用文字颜色
简单示例
给文字添加一个向右下角的灰色阴影：
h1 {
text-shadow: 2px 2px 3px #999;
}
这会让文字产生轻微立体感，常用于标题设计。
立即学习“前端免费学习笔记（深入）”；
多重阴影效果
你可以通过逗号分隔添加多个阴影，实现更复杂的效果：
p {
text-shadow: 1px 1px 1px #ccc,
2px 2px 3px #999,
0 0 10px rgba(0,0,0,0.3);
}
这种叠加方式可以做出发光、浮雕或投影等高级效果。
实用技巧
- 使用 rgba 或 hsla 颜色可以让阴影更自然，比如半透明黑色
- 较大的模糊值配合小偏移能模拟发光效果
- 负的水平或垂直值可让阴影出现在文字左侧或上方
- 在深色背景上建议用较亮的阴影，浅色背景则用深色阴影提高对比度
基本上就这些，合理使用 text-shadow 能显著提升文字的视觉层次。