精通 CSS Text Shadow：让文字脱颖而出的秘诀
在 Web 设计中， 文字阴影（Text Shadow） 不仅仅是为了增加可读性，它更是创造视觉深度和艺术氛围的核心手段。通过多层阴影的叠加，我们可以实现从简单的投影到复杂的霓虹、3D、甚至火焰效果。
1. 语法拆解：那四个值代表什么？
text-shadow: h-shadow v-shadow blur-radius color;
- 水平偏移 (h-shadow)： 正值向右，负值向左。
- 垂直偏移 (v-shadow)： 正值向下，负值向上。
- 模糊半径 (blur-radius)： 值越大阴影越模糊。设为 0 则边缘锋利。
- 颜色 (color)： 支持 RGBA，这意味着你可以控制阴影的透明度。
2. 解决的具体问题：提升对比度与艺术感
场景一：背景图上的文字。 当文字背景复杂或对比度不足时，添加一个轻微的深色模糊阴影可以瞬间提升可读性，而不会破坏整体美感。
场景二：实现描边效果。
CSS 本身没有完善的文字描边属性，但通过设置四个方向的 1px
阴影（无模糊），我们可以完美模拟出文字描边：
1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000
。
场景三：发光效果。 将偏移量设为 0，并增加较大的模糊半径和高亮颜色，即可实现霓虹灯般的发光感。
3. 多层叠加的力量
text-shadow
支持逗号分隔的多组值。层级顺序遵循“先写的在上面”。利用这一特性，你可以通过多层偏移实现厚重的
3D 效果，或者通过不同颜色的模糊层制造真实的物理投影感。