text-shadow属性通过设置水平偏移、垂直偏移、模糊半径和颜色，可为文本添加阴影以增强视觉效果。合理使用多层阴影能实现高亮、外发光等效果，提升文本在复杂背景中的可读性与设计表现力。
在CSS中，text-shadow 属性可以为文本添加阴影效果，常用于实现高亮、立体感或增强可读性。通过控制阴影的偏移、模糊半径和颜色，你可以灵活地设计出各种视觉风格。
text-shadow 基本语法
text-shadow 的语法结构如下：
text-shadow: h-offset v-offset blur-radius color;- h-offset：水平偏移，正值向右，负值向左
- v-offset：垂直偏移，正值向下，负值向上
- blur-radius：模糊半径，值越大越模糊，可选，默认为0（无模糊）
- color：阴影颜色，可选，未设置时浏览器自动选择默认颜色（通常为黑色）
实现文本高亮的技巧
要实现类似“高亮”效果的文本阴影，可以通过浅色阴影轻微扩散来模拟光晕或突出显示。例如使用淡黄色或白色阴影叠加在深色背景上。
示例代码：
立即学习“前端免费学习笔记（深入）”；
.highlight {
color: #333;
text-shadow: 0 0 5px #fff, 0 0 10px #ffeb3b;
font-weight: bold;
}
这个例子中，两层阴影叠加：第一层白色轻柔扩散，第二层黄色稍大模糊，营造出发光高亮的感觉。
控制偏移与模糊以增强可读性
当文本置于复杂背景时，适当添加阴影可提升辨识度。比如让文字阴影轻微偏离并带模糊，避免与背景混在一起。
推荐设置：
- 微小偏移：
1px 1px或2px 2px - 低模糊：
1px ~ 3px - 深色背景用浅色阴影，浅色背景用深色阴影
示例：
.clear-text {
color: white;
text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
}
这会在暗色背景下使白色文字更清晰，阴影轻微下移且略带模糊，自然不刺眼。
多层阴影创造丰富效果
text-shadow 支持多个阴影值，用逗号分隔，从前到后叠加渲染。可用于制作外发光、内陷、浮雕等效果。
例如模拟外发光：
.glow {
color: #fff;
text-shadow:
0 0 5px #fff,
0 0 10px #fff,
0 0 15px #ff8a00;
}
层层递进的模糊阴影形成由内而外的光晕，适合标题或强调文本。
基本上就这些。合理使用 text-shadow 能显著提升界面表现力，关键是根据背景和设计目标调整偏移、模糊和颜色组合。不复杂但容易忽略细节。
