郑哲东相信不少前端同学第一次接触 text-shadow 的时候，都觉得它是个“随手一写就完事”的属性：给文字加个阴影，四个参数一填，看起来真简单。但真到了实际项目里，你会发现这个属性远没有想象中那么“省心”。我见过太多人在深色背景下做字体发光效果，结果糊成一团；也有不少人想用text-shadow的描边功能，却发现文字笔画一粗就露怯。说实话，CSS3里最容易被低估的属性，text-shadow 绝对排得上号。今天这篇我们就把它里里外外拆一遍，从最基础的四个参数讲到多层叠加、实战组合技，再到浏览器渲染和性能优化的那些坑。无论你是刚入行的新手，还是写了几年页面想抠细节的老手，这篇都值得你花几分钟看一看。
1. text-shadow 的四个参数，先拆干净再谈效果
我习惯跟团队里的小朋友说：凡是觉得某段 CSS 简单到不用查文档的，基本都栽过跟头。text-shadow 就是这样。它最基础的语法其实是四个值（也可以简写为三个），很多人只记住了前两个偏移量和第三个模糊半径，碰到颜色参数就迷糊，或者把颜色和模糊半径的先后顺序搞混。我们先从语法结构说起，这决定了后面所有复杂效果的地基。
1.1 标准语法分解：偏移、模糊、颜色
text-shadow 的标准语法长这样：
css复制text-shadow: offset-x offset-y blur-radius color;
实际写起来就是：
css复制.text {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
拆开看：
offset-x：阴影在水平方向的偏移量，正数向右，负数向左。offset-y：阴影在垂直方向的偏移量，正数向下，负数向上。blur-radius：模糊半径，数值越大阴影越模糊、扩散范围越广，0表示完全不模糊，也就是锐利阴影。很多人写成4px就完事，却不知道这个值其实是可以通过倍率关系来控制阴影视觉重量的。color：阴影颜色，可以是 HEX、RGB、RGBA 等任何 CSS 合法颜色值。
颜色参数放在最后或最前都合法，不过我建议统一放在末尾，这样改起来更不容易出错。还有个很多人不知道的用法：如果省略颜色，text-shadow 会使用 color 属性的值，也就是 currentColor 来绘制阴影。这在做主题色自适应的时候能省不少事，后面我会单独讲。
1.2 模糊半径为 0 的硬阴影，比你想的有用
模糊半径默认为 0，也就是如果你不写第三个值，阴影是“实心”的。比如：
css复制.hard-shadow {
text-shadow: 2px 2px 0 #000;
}
这种硬阴影很多人觉得“太生硬，没用”，但其实它在模拟文字“叠影”效果、像素风标题、复古风格 UI 上都非常好使。尤其是设计稿里要求做“微立体”标题的时候，两块不同颜色的硬阴影错位叠在一起，比带模糊的软阴影更干净利落。
1.3 currentColor 的妙用：让阴影颜色跟着文字走
currentColor 是 CSS 里一个很有意思的关键字，它表示当前元素 color 属性的计算值。如果你写：
css复制.theme-text {
color: #ff6b35;
text-shadow: 2px 2px 6px currentColor;
}
那么阴影颜色就会自动跟随文字颜色。这样做的好处是，通过一个变量控制主题色时，阴影不会掉队。比如一个组件在不同场景下需要切换颜色，你只需要改 color，阴影就跟着变了，不用额外写两套规则。
当然，currentColor 也有它的局限：它只能跟随当前元素的文字颜色，不能指定成某个兄弟元素或父元素的颜色。所以如果你需要阴影颜色和文字颜色不同，那还是老老实实写具体颜色值。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 多层阴影叠加：从“能用”到“好用”的关键一步
text-shadow 真正的威力，要在多层阴影叠加之后才体现出来。语法上，多个阴影用逗号分隔，第一个阴影在最上层，后面的依次往下排。这条规则和 box-shadow 一致，但是很多人不知道它的实际意义，结果把叠加顺序写反，效果跟预想的差十万八千里。
2.1 叠加顺序和视觉层次的关系
打个比方，你把好几层阴影想象成叠在一起的手绘稿，第一层在最上面，最后一层在最下面。比如做一个发光按钮上的标题文字，你可能会写：
css复制.glow-text {
color: #fff;
text-shadow:
0 0 4px #fff,
0 0 8px #fff,
0 0 16px #4fc3f7,
0 0 32px #4fc3f7;
}
第一层 0 0 4px #fff 负责给文字边缘一个紧贴的白色光晕，第二个 0 0 8px #fff 把光晕稍微推开，第三、第四层用偏蓝的