文字阴影不改变颜色但可增强视觉效果，通过text-shadow与color配合实现发光、浮雕、外描边等风格，如发光文字用多层黄色阴影，浮雕效果利用正负偏移模拟光影，外描边则用四周阴影包围文字，需注意可读性与兼容性。
在CSS中，文字阴影（text-shadow）本身并不直接改变文字颜色，但它可以与文字颜色结合使用，创造出富有层次感和视觉冲击力的文字效果。通过合理设置 color 和 text-shadow 属性，你可以实现发光、浮雕、外描边等多种风格。
基础语法与结构
text-shadow 的语法格式为：
text-shadow: h-offset v-offset blur-radius color;- h-offset：水平偏移（正右负左）
- v-offset：垂直偏移（正下负上）
- blur-radius：模糊半径（越大越模糊）
- color：阴影颜色
多个阴影可以用逗号分隔叠加使用。
文字颜色与阴影的搭配技巧
文字本身的 color 决定了主体颜色，而 text-shadow 可以增强对比或营造氛围。关键在于选择合适的阴影颜色与主色协调。
- 深色文字配浅色阴影（如白色或浅黄）可提升可读性，适合暗背景
- 浅色文字加深色阴影（如黑或深灰）能增强立体感
- 同色系渐变阴影可制造“发光”效果，比如黄色文字加橙黄到透明的阴影
常见实用效果示例
以下是几种结合 color 与 text-shadow 的经典写法：
/* 发光文字 */.glow {
color: #fff;
text-shadow: 0 0 5px #ffeb3b, 0 0 10px #ffeb3b;
}/* 浮雕效果 */
.emboss {
color: #ccc;
text-shadow: 1px 1px 0 #fff, -1px -1px 0 #000;
}/* 外描边（伪描边） */
.stroke {
color: #000;
text-shadow:
-1px -1px 0 #fff,
1px -1px 0 #fff,
-1px 1px 0 #fff,
1px 1px 0 #fff;
}
注意事项与兼容性
text-shadow 在现代浏览器中支持良好，但老版本IE不支持。使用时注意以下几点：
- 避免过度模糊导致文字难以辨认
- 在响应式设计中，大阴影可能在小屏幕上显得突兀
- 高对比度阴影有助于可访问性，尤其在复杂背景上
基本上就这些。掌握 color 与 text-shadow 的配合，能让文字在界面中脱颖而出，又不失清晰自然。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
