什么是文字阴影？
文字阴影（Text Shadow）是CSS3提供的一项强大功能，允许您为文本元素添加一个或多个阴影效果。通过text-shadow属性，您可以控制阴影的偏移量、模糊半径和颜色，创造出丰富的视觉层次。
与图片编辑软件中的文字阴影不同，CSS文字阴影完全基于代码，无需额外的图片资源，且具有良好的可维护性和响应性。
text-shadow 语法
CSS text-shadow 属性的基本语法如下：
text-shadow: h-offset v-offset blur-radius color;
其中：
- h-offset：水平阴影偏移（正数向右，负数向左）
- v-offset：垂直阴影偏移（正数向下，负数向上）
- blur-radius：模糊半径（可选，默认为0）
- color：阴影颜色（可选，浏览器会使用文本颜色）
实际效果示例
基础阴影效果
经典阴影
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
双色立体阴影
立体效果
text-shadow: 3px 3px 0 #cc9966, 6px 6px 0 #996633;
发光文字效果
发光文字
text-shadow: 0 0 10px #f39c12, 0 0 20px #e67e22;
描边文字效果
描边文字
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
使用技巧与注意事项
✅ 性能优化：避免过度使用高模糊值的阴影，以免影响页面渲染性能。
✅ 可读性：确保阴影不会影响文字的可读性，特别是在复杂背景上。
✅ 兼容性：现代浏览器均支持text-shadow，IE9及以上版本支持良好。
✅ 响应式：在移动设备上适当减小阴影尺寸，以获得更好的视觉效果。