text-shadow属性通过添加阴影提升文字可读性与设计感，基本语法为text-shadow: h-offset v-offset blur-radius color；水平与垂直偏移控制位置，模糊半径影响柔和度，颜色可选；浅色文字配深色阴影如text-shadow: 1px 1px 2px #000增强对比，深色文字用浅色外光如text-shadow: -1px -1px 1px #fff提升清晰度；使用rgba或hsla控制透明度使效果更自然；可创造发光文字如text-shadow: 0 0 10px #fff, 0 0 20px #ff0；立体效果通过多层小偏移叠加实现如text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb；内陷文字利用顶部亮色阴影营造凹陷感如text-shadow: 0 -1px 1px rgba(255,255,255,0.5)；现代浏览器支持良好，IE9以下不兼容需降级处理；避免过度使用以防影响性能与阅读，移动端注意模糊半径不宜过大；结合filter或mix-blend-mode可优化显示；合理调整参数能有效增强视觉层次。
使用 text-shadow 属性可以显著增强文字的视觉表现力，尤其是在提升可读性和设计感方面。通过添加阴影，可以让文字在复杂背景上更清晰，或营造出立体、发光、浮雕等效果。
基本语法与参数说明
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: 1px 1px 2px #000;
- 深色文字配浅色外光：text-shadow: -1px -1px 1px #fff;
- 使用透明度控制柔和度，推荐 rgba 或 hsla 颜色值
创造视觉特效的常见用法
除了实用性，text-shadow 还可用于设计风格化文字。
-
发光文字：大模糊+浅色，适合标题
text-shadow: 0 0 10px #fff, 0 0 20px #ff0; -
立体效果：叠加多个小偏移阴影模拟厚度
text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb; -
内陷文字：顶部阴影用亮色，底部用暗色，制造凹陷感
text-shadow: 0 -1px 1px rgba(255,255,255,0.5);
注意事项与兼容性
text-shadow 在现代浏览器中支持良好，但仍有几点需要注意。
- 老版本 IE（IE9 以下）不支持，需考虑降级方案
- 避免过度使用，过多阴影会影响加载和阅读体验
- 在移动端注意模糊半径不要过大，以免文字发虚
- 可结合 filter: contrast() 或 mix-blend-mode 进一步优化显示效果
基本上就这些。合理使用 text-shadow 能让文字更突出、更有层次，关键是根据背景和设计目标调整参数。不复杂但容易忽略细节。
