在CSS中，text-shadow是用来给文字添加阴影或发光效果的属性。它不会改变文字本身的布局空间，只在渲染层面叠加投影，因此常用于提升标题可读性、制作霓虹灯质感或立体浮雕文字。理解它的参数结构和叠加逻辑，是做出精细视觉效果的前提。
一、text-shadow基础语法
text-shadow的最简语法包含三个长度值加一个颜色值，分别是水平偏移、垂直偏移、模糊半径和阴影颜色。水平偏移为正表示向右，为负向左；垂直偏移为正向下，为负向上。模糊半径必须为非负数，数值越大阴影越分散柔和。如果省略颜色，浏览器会使用文字的color值作为阴影色。
除了单阴影，text-shadow支持用逗号分隔的多层阴影声明。每一层按顺序独立渲染，先写的层位于下方，后写的层叠在其上。这种机制让我们可以用多层不同颜色和偏移的阴影模拟复杂光照。例如下面这段代码展示了一个简单的双层阴影：
/* 先画深色底影，再叠亮色高光 */
.title {
color: #fff;
text-shadow: 2px 2px 4px rgba(0,0,0,0.6),
-1px -1px 2px rgba(255,255,255,0.8);
}
上面的例子中，第一层向右下偏移的半透明黑影让文字浮起，第二层向左上偏移的白影形成高光边缘。注意模糊半径设为2px时高光不会太散，保持清晰轮廓。多层阴影的总层数在主流浏览器中没有明显上限，但层数过多会影响渲染性能。
二、用text-shadow实现常见效果
1. 立体浮雕文字
立体感通常依赖连续的同色系阴影逐层位移来模拟厚度。思路是从零偏移开始，每次增加一到两个像素的位移并降低明度，叠出数层形成“实体”侧面。下面示例用六层黑色透明阴影把文字向右下推出立体块：
.emboss {
color: #333;
background: #eee;
text-shadow: 1px 1px 0 #ccc,
2px 2px 0 #c9c9c9,
3px 3px 0 #c6c6c6,
4px 4px 0 #c3c3c3,
5px 5px 0 #c0c0c0,
6px 6px 6px rgba(0,0,0,0.3);
}
这种写法的优点是纯CSS无图片，缩放不失真。缺点是层数写死，若字体变大需手动调参。相比使用box-shadow模拟块背景，text-shadow直接附着在字形上，边角更自然。
2. 霓虹灯发光效果
霓虹效果依赖大模糊半径和亮色阴影多次叠加。核心是把文字颜色设为暗色或透明，用多层同色亮影向外扩散。如下代码用青色多层阴影做出夜晚招牌感：
.neon {
color: #fff;
text-shadow: 0 0 5px #0ff,
0 0 10px #0ff,
0 0 20px #0ff,
0 0 40px #0aa;
}
这里模糊半径从5px递增到40px，使光晕由实到虚。若想更刺眼可把color设为#0ff并加白心。该方案在暗背景下表现最佳，亮背景会冲淡光感。与SVG滤镜相比，text-shadow兼容性更好且代码简短。
三、容易踩的坑与注意事项
一个常见误区是认为模糊半径可以为负，实际上规范规定它必须是零或正数，写负值会被浏览器忽略该层或视为零。另一个坑是在逗号后漏写空格导致解析失败，虽然多数浏览器容错，但严格写法应保留空格。还有人把<input>等标签的阴影和文字阴影混淆，text-shadow只对文字生效，表单控件需用filter或box-shadow。
性能方面，页面中数百个节点同时使用多层大模糊阴影，在低端设备会出现掉帧。建议仅对标题或少量装饰文字使用，并用will-change优化合成层。下表列出参数组合的影响：
| 偏移组合 | 模糊半径 | 视觉结果 |
|---|---|---|
| 0 0 | 小 | 均匀描边光晕 |
| 正 正 | 中 | 右下投射浮起 |
| 负 负 | 零 | 左上硬边高光 |
通过上述示例可以看到，text-shadow虽是单属性，却足以覆盖大部分文字装饰场景。从基础位移到多层叠加，只要理清每层顺序与颜色关系，就能稳定输出设计所需的视觉效果。
text-shadowCSS文字阴影前端样式修改时间：2026-08-02 09:21:27