text-shadow 的第三个参数是模糊半径，决定阴影边缘柔和度，单位为像素且必须非负；0 值跳过高斯模糊，导致硬边；多层阴影中各模糊半径独立计算；过大值（>10px）易引发重绘卡顿。
text-shadow 的第三个参数就是模糊半径
很多人误以为 text-shadow 模糊效果靠“调颜色”或“叠加多层”，其实核心控制项就是第三个值：模糊半径（blur radius）。它决定阴影边缘的柔和程度，单位是像素，必须为非负数。
-
text-shadow: 2px 2px 0 #000—— 无模糊，硬边阴影 -
text-shadow: 2px 2px 4px #000—— 中等模糊，常用范围 -
text-shadow: 2px 2px 12px #000—— 强模糊，易导致文字可读性下降
模糊半径为 0 时不会渲染抗锯齿过渡
当模糊半径设为 0，浏览器完全跳过高斯模糊计算，只做纯色偏移渲染。这在需要精确像素对齐（比如 retro 风字体、图标字体描边）时有用，但也会让阴影看起来“生硬”甚至出现锯齿感——尤其在 Retina 屏或缩放比例非 100% 时。
- 若发现文字边缘发虚但
text-shadow明明写了0，检查是否被父级transform: scale()或 CSS 变量间接影响了渲染上下文 - Firefox 对
0模糊的处理比 Chrome 更严格，某些字体下可能仍显轻微柔化
多个 text-shadow 叠加时模糊半径独立计算
一个元素可以声明多个阴影，用逗号分隔，每个阴影的模糊半径互不影响。这是实现“立体字”“霓虹光效”或“双色描边”的关键。
h1 {
color: white;
text-shadow:
-1px -1px 2px rgba(0,0,0,0.5),
1px -1px 2px rgba(0,0,0,0.5),
-1px 1px 2px rgba(0,0,0,0.5),
1px 1px 2px rgba(0,0,0,0.5),
0 0 8px #ff6b6b;
}
注意：最后一行的 0 0 8px #ff6b6b 是中心辉光，它的 8px 模糊半径只作用于自身，不会“增强”前面的阴影。
立即学习“前端免费学习笔记（深入）”；
大模糊半径会显著增加重绘开销
模糊半径超过 10px 后，浏览器需对每个字符做更大范围的像素采样，尤其在动画中频繁修改 text-shadow（比如 hover 时从 0 突变到 15px），容易触发全层重绘，造成卡顿。
- 避免在
:hover或@keyframes中直接 animating 模糊半径值 - 如需动态模糊，优先用
filter: blur()包裹整个文字容器，但注意它会影响所有子内容（包括内联链接、图标等） - 移动端 Safari 对大于
6px的text-shadow模糊支持不稳定，建议实机测试
2px–6px 是兼顾表现力与性能的常见区间；真正需要强视觉冲击时，与其盲目拉高模糊值，不如配合透明度（rgba()）和多层偏移来构建层次。 
