郑哲东相信不少前端同学第一次接触 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 把光晕稍微推开，第三、第四层用偏蓝的颜色往外扩散。这个顺序体现了“光源越强，光晕越密”的物理直觉——如果不小心把颜色层写在了前面，边缘就会泛蓝，内圈反而没有光感，整体效果就很奇怪。
2.2 用多层阴影模拟文字描边，但别指望它完美替代 stroke
有一种常见的用法是用多层硬阴影做描边效果：
css复制.stroke-text {
color: #fff;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
上下左右四个方向各偏移 1px，就能得到一个像素级的黑色描边。这个技巧在很多活动页、海报标题里非常常见，因为 -webkit-text-stroke 的兼容性和渲染质量在不同浏览器里表现不一，而且描边宽度会向笔画内侧或外侧扩展，容易让细体字发虚。而 text-shadow 的硬阴影描边在控制得当的情况下，轮廓更干净。
但有一说一，如果要描 2px 以上的边，text-shadow 方案就会暴露问题：四个方向单纯偏移会在斜角方向产生缺口。所以更复杂一点的描边方案需要再加四组斜向偏移，也就是八方向描边：
css复制.stroke-text-8 {
color: #fff;
text-shadow:
-1px -1px 0 #000,
0 -1px 0 #000,
1px -1px 0 #000,
-1px 0 0 #000,
1px 0 0 #000,
-1px 1px 0 #000,
0 1px 0 #000,
1px 1px 0 #000;
}
八方向描边基本能满足 2px 以内字重的需求，但是再大就很难看了，这时候我建议你去用 SVG 或者 canvas 的方案，而不是死磕 CSS。
2.3 三层阴影调出“浮起”的立体感
很多设计稿里的立体标题，其实都不是用 transform 做 3D 变换，而是用多层阴影堆出来的。我常用的一套“伪 3D”参数如下：
css复制.threed-text {
color: #fff;
text-shadow:
0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25);
}
前五层是逐像素向下偏移的硬阴影，模拟文字的厚度；后面几层带一点模糊，模拟落地时产生的柔和投影。如果字体较大，你可以把每一层的 y 偏移量加大 0.5px 或 1px，比如 10 层阴影对应 10px 的厚度。这样做出来的标题，比单层阴影的效果强一倍不止，而且渲染成本并没有明显上升。
3. 组合技：用阴影实现真正实用的文字特效
理论部分聊完了，接下来是我在实际项目中反复用到的几组“组合技”。这些效果看着花哨，其实每一条都经过性能验证和兼容性确认，可以直接抄到你的项目里。
3.1 深色背景上的霓虹发光字，三层是底线
霓虹效果是 text-shadow 最经典的应用场景，没有之一。核心思路是用同色系颜色的多层阴影叠出光晕。这里我要强调一个很多人容易忽略的细节：先在文字上铺一层底色。比如你要做蓝色霓虹字，正确做法是文字本身用非常深的蓝或黑色，然后用多层亮蓝做外发光。如果文字本身已经是亮蓝色，再叠加同色发光，对比度就不够，深色背景上一片糊。
实际参数参考：
css复制.neon-blue {
background: #0b0e14;
color: #b3e5fc;
text-shadow:
0 0 5px #4fc3f7,
0 0 10px #4fc3f7,
0 0 20px #0288d1,
0 0 40px #01579b,
0 0 80px #01579b;
}
五个层次从近到远，亮度逐渐降低、颜色逐渐加深，模拟光晕衰减。需要注意，0 0 开头的阴影不会偏移，所以文字本身不能太细，笔画太细的字被光晕一盖就看不见了，建议字重至少 600 或者用粗体。
3.2 凹陷字和凸起字，靠的是阴影“上下颠倒”
凹陷字效果的核心是：上方用深色阴影，下方用亮色阴影，形成一种“被按下去”的视觉假象。典型参数：
css复制.inset-text {
background: #333;
color: #555;
text-shadow:
0 1px 0 #111,
0 -1px 0 #555;
}
这里上方阴影偏深、下方阴影偏亮，视觉上字体就像陷进背景。反过来，凸起字就是上方亮、下方暗：
css复制.emboss-text {
background: #e8e8e8;
color: #d0d0d0;
text-shadow:
0 1px 0 #fff,
0 -1px 0 #999;
}
这种效果特别适合用在按钮文字、Breadcrumb 分隔符上，成本极低，但质感提升非常明显。
3.3 阴影与 background-clip 结合：渐变文字配阴影
渐变文字本身可以用 background-clip: text 实现，但问题在于渐变文字一旦加上 text-shadow，阴影会覆盖在整个文字形状上，而不是按照渐变像素逐点计算，效果会很“脏”。我试过几种方案，最优解其实是把渐变文字放在主层，用伪元素复制一份文字做阴影层，主层覆盖在上面。伪元素的定位和主层保持一致，用 position: absolute 偏移来实现阴影位移，再让主层背景设为透明文字渐变。这样做虽然多了一个伪元素，但层次感和清晰度都不是单纯 text-shadow 能比的。
具体思路大概是：
html复制<h2 class="gradient-title" data-text="我是标题">我是标题</h2>
css复制.gradient-title {
position: relative;
background: linear-gradient(135deg, #f7971e, #ffd200);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.gradient-title::before {
content: attr(data-text);
position: absolute;
left: 0;
top: 0;
z-index: -1;
color: transparent;
text-shadow: 3px 3px 8px rgba(0,0,0,.35);
-webkit-background-clip: text;
background-clip: text;
background: linear-gradient(135deg, #f7971e, #ffd200);
}
这里 ::before 用 attr(data-text) 拿文本内容，生成一个一模一样的文字层，再通过 text-shadow 做阴影，最后用 z-index: -1 放到主层下面。这样做的好处是阴影完全贴合文字形状，不会被渐变背景干扰。
3.4 文本渐隐效果：用阴影做“溶入背景”的错觉
还有一种比较高级的玩法是让文字看起来像“溶入”背景里，而不是单纯加个投影。原理是用大半径、低透明度的多层阴影把文字边缘向外扩散，并让扩散范围逐渐变大。比如：
css复制.fade-text {
color: #fff;
text-shadow:
0 0 10px rgba(255,255,255,.8),
0 0 20px rgba(255,255,255,.5),
0 0 40px rgba(255,255,255,.3),
0 0 80px rgba(255,255,255,.15);
}
这种效果在 Banner 首屏、视频封面标题上很常用，视觉重心完全集中在文字内容本身，背景图的干扰被压下去不少。需要注意的是，这种多重大半径阴影叠加后，在某些低分辨率屏幕上会有明显的噪点感，如果页面配了背景纹理，建议把阴影层透明度再压低。
4. 渲染性能与间距问题的排查实录
text-shadow 在大部分场景下性能都够用，但一旦遇到大量文字、超大模糊半径、或者动画，就容易出问题。我踩过几个很实际的坑，在这里记录下来，希望能帮大家提前规避。
4.1 模糊半径越大，浏览器渲染压力越大
text-shadow 的模糊算法本质上是高斯模糊，模糊半径越大，参与计算的像素范围就越大。若一个页面里放了十几个甚至几十个大标题，每个都带 0 0 32px 的发光阴影，低端 Android 设备上滚动帧率会肉眼可见地掉。移动端尤其明显，WebView 没有 GPU 图层优化时，阴影会被当成普通绘制指令逐帧重算。
我的建议是：能少用就少用。模糊半径超过 16px 的阴影，尽量不要超过三个，而且只加在关键标题上。如果一个页面里需要大量发光字，我建议改为 filter: drop-shadow()，它会把文字当成一个整体做滤镜处理，某些情况下 GPU 加速更友好。但注意，drop-shadow 也是用滤镜通道，性能不一定更好，得看场景实测。
4.2 阴影不参与布局，不会撑开父容器
text-shadow 和 box-shadow 一样，阴影是绘制层的东西，不参与文档流布局。这意味着你给一段文字加了一个向右偏移 20px 的阴影，它不会把旁边的元素挤开，父容器也不会自动变大。很多新手会在设计稿里看到文字旁边有一大块阴影，就以为容器宽度不够，用 padding 或者 margin 去硬补，其实完全不需要。
反过来，如果阴影太大被父容器 overflow: hidden 裁掉了，你得知道不是阴影“丢了”，而是绘制区域被裁剪了。处理方法是给父容器加一点 padding，或者把 overflow 改成 visible。
4.3 动画中频繁改变阴影会导致卡顿，建议分层处理
如果你在动画里同时改变 text-shadow 的偏移量和模糊半径，浏览器每次都要重新计算阴影并重绘。我实测过一个案例：一个旋转的圆形徽标，上面有一圈文字加了发光阴影，每帧变化阴影模糊半径，结果在 Chrome 里直接掉到 40fps 以下。后来我把阴影拆到独立的伪元素上，动画只做 transform: rotate()，阴影层静止不动，帧率立刻回满 60fps。
经验总结：能不变阴影就不变阴影；实在要变，控制在浅层偏移，比如只改 offset-y，模模糊糊变化能不加就不加。配合 transform: translateZ(0) 或者 will-change: text-shadow? 意义不大，因为 text-shadow 本身就是绘制属性，强行抬到合成层也不一定有改善。
4.4 小字号文字慎用阴影，渲染结果容易“发脏”
12px、14px 这种小字号下，文字的笔画间隙本来就很窄，再加上一层模糊阴影，字体细节会被糊成一片。如果你非要给正文加阴影（比如在图片上压字），我建议模糊半径控制在 2px 以内，颜色透明度控制在 0.4 以下。另外，不同操作系统对阴影字体的渲染差异很大，Windows 上抗锯齿逻辑和 macOS 不一样，同一个阴影参数在 Mac 上看起来很柔和，Windows 上可能就脏得没法看。建议把阴影效果做得“保守一点”，以 Windows 的渲染效果为准来调参。
5. 兼容性与可维护性的几个经验
最后聊一聊兼容性和代码维护。text-shadow 从 CSS2 时期就已经出现，CSS3 只是把它纳入了规范，所以它的兼容性其实出奇地好。真正需要注意的是那些“看起来能用，但实际表现不一致”的场景，以及工程上如何组织这段 CSS。
5.1 现代浏览器基本全兼容，但 IE9 是个分水岭
text-shadow 在 IE10+ 和所有现代浏览器里都能用，IE9 及以下完全不支持。虽然现在很多项目已经不考虑 IE7-9 了，但如果你的产品还要照顾老旧系统，那就得注意：不支持的时候文字虽然还是正常显示，但阴影效果会完全消失，如果阴影跟文字的颜色相差很大，视觉上会比较“秃”。这种情况下可以做个 @support 查询，或者用 @media 将老浏览器踢到降级样式里。
5.2 把阴影参数变量化，方便维护多套主题
我在做组件库的时候，习惯把常用阴影效果定义成 CSS 变量，放在 :root 里。这样换主题的时候，只需要替换一套变量，所有用到的组件自动跟着变，不用满文件搜索替换。
比如我常用的变量设计：
css复制:root {
--shadow-text-soft: 0 1px 2px rgba(0, 0, 0, 0.15);
--shadow-text-glow-blue: 0 0 4px rgba(79, 195, 247, 0.8), 0 0 8px rgba(79, 195, 247, 0.6);
--shadow-text-threed: 0 1px 0 #ccc, 0 2px 0 #b3b3b3, 0 3px 2px rgba(0, 0, 0, 0.2);
}
用的时候直接 text-shadow: var(--shadow-text-soft)。这样做还有个额外的好处：你可以在媒体查询里针对不同屏幕尺寸覆盖变量，比如小屏手机上模糊半径减小一档，算是一种比较优雅的响应式手段。
5.3 调试技巧：用浏览器开发者工具逐层查看阴影
Chrome 的 DevTools 里，选中一个带 text-shadow 的元素，在 Styles 面板的 text-shadow 属性旁边会有一个小图标，点开就能直接可视地调节偏移量、模糊半径、颜色。这个功能比一遍遍改代码刷新要高效得多。我调试发光效果基本都靠它，先调到大概感觉，再看代码定稿。
在 Firefox 的 DevTools 里也有类似的可视化编辑器。如果你用的浏览器版本比较旧，没有可视化入口，还有一个土办法：把多层阴影临时拆成不同颜色的极浅透明度，用删除法确认每一层各自的效果，等确定了再合并回一层。
5.4 复用原则：能抽象成公共工具类就别到处重写
如果你的项目里多个地方都要用到发光标题、立体标题，我建议把这几类样式抽成工具类，而不是每个组件里复制粘贴一份。它们变化的部分通常只有字体大小和颜色，阴影层级的相对关系是固定的。我一般是这样组织的：
css复制.title-glow {
color: #fff;
text-shadow:
0 0 4px currentColor,
0 0 12px currentColor,
0 0 24px currentColor;
}
.title-emboss {
color: #e0e0e0;
text-shadow:
0 1px 0 #fff,
0 -1px 0 #999;
}
当需要调整主题色时，直接覆盖 color 即可，因为使用了 currentColor，阴影层会自动联动。这种做法让我在维护活动页的时候省了很多心，不用动不动就回查样式。
6. 实操心得：我压箱底的几个调参技巧
前面几节讲了很多原理和案例，最后我再掏点真正实际的东西。这些技巧没什么高深的道理，都是我一次一次改设计稿、一次次在真机预览里试出来的。
6.1 先定颜色后调半径，顺序反了你只能瞎调
我见过很多新人拿到设计稿第一件事就是改模糊半径，改了半天都不对。我的习惯是先锁定阴影颜色和透明度，再调偏移量和模糊半径。因为颜色决定了阴影的“物理质感”，是偏硬的光影还是雾气一样的光晕，先把它定死，后面的参数都围绕这个质感去找。透明度也很关键，同等色值下，透明度高的影子比模糊半径大的影子看起来更“实”。所以顺序应该是：颜色 → 透明度 → 偏移量 → 模糊半径。
6.2 深浅背景各备一套参数，不要一套走天下
在浅色背景下，阴影通常用黑色系、低透明度、小半径，比如 0 2px 4px rgba(0,0,0,.15)；在深色背景下，阴影用亮色系、高透明度、大半径，比如前面的霓虹效果。我遇到过有人直接把浅色背景的阴影参数用到深色背景上，结果黑乎乎一片，毫无立体感。原因是黑阴影本身和深色底没有对比，自然看不出层次。如果你不太确定该用多深的阴影，可以在浅色背景下看阴影的灰度比例，深色背景下则直接放大半径、调亮颜色。
6.3 阴影层配合 letter-spacing 和 font-weight，效果会翻倍
同样一个阴影效果，在不同字重、不同字距下的表现差别很大。细体字加发光，光晕会把笔画之间的空隙填满，字会显得变粗；粗体字加硬阴影，阴影边缘和笔画轮廓的对比更强，立体感更突出。我在做标题的时候通常会把 font-weight 调到 700 以上，再给 letter-spacing 加一点点正值（比如 0.5px），这样阴影和笔画之间的“呼吸感”会更好，不会挤在一起。特别要注意中文标题，汉字笔画多，阴影半径一大就容易糊，所以中文标题的发光效果建议比英文标题保守一档。
6.4 用渐隐阴影代替纯透明遮罩，节省一张背景图
偶尔会遇到需要在图片上压一段大标题文字的情况。传统方案是放一层黑色半透明渐变遮罩，保证文字可读性。但有些场景遮罩破坏画面整体氛围，这时候可以改用文字自身的阴影来“拉”出可读性。做法是给标题加多层大半径、低透明度的深色阴影，比如：
css复制.title-over-image {
color: #fff;
text-shadow:
0 2px 4px rgba(0,0,0,.4),
0 4px 8px rgba(0,0,0,.3),
0 8px 16px rgba(0,0,0,.2),
0 16px 32px rgba(0,0,0,.1);
}
这样文字边缘的对比度被阴影撑起来，背景图大部分区域仍然是完整的，视觉上既清晰又不突兀。这个方案在活动页首屏特别实用，省一张遮罩图也是省资源。
6.5 别忽视阴影对可读性的影响，尤其是正文场景
我见过有人把正文也做成发光效果，当时看着炫，但用户读了两行就眼花了。text-shadow 本质上是“装饰属性”，它的存在会影响文字的对比度，尤其是长时间阅读的场景。正文我建议要么不用阴影，要么只用极低透明度的柔和阴影，比如 0 1px 2px rgba(0,0,0,.08)。如果你要在正文里混排标题和段落，优先保证正文清晰，再用厚重的阴影去做标题视觉层级，不然整页都是“会发光的字”，用户第一眼根本抓不住重点。
CSS3 的 text-shadow 在别人看来也许只是“给文字加点影子”这么简单，但真正用好它，其实牵扯到视觉原理、浏览器渲染机制、多层叠加的策略，以及和 color、background-clip、currentColor 这些能力的配合。我见过很多页面因为阴影参数没调好，明明设计稿挺精致的，最后效果却有点“土味”，十有八九都是因为只用了单层阴影、颜色直给、半径拍脑袋。希望这篇文章能帮你把这些细节补上，下次再做标题效果的时候，能多试几种组合，而不是停留在最常规的写法上。如果你在实际调参中有什么独门技巧，也欢迎在评论区分享出来，咱们互相抄作业。