如何精确调整HTML5文字阴影的模糊半径大小？

为什么你总是调不准文字阴影的模糊程度？

很多前端开发者在为标题、按钮或卡片文字添加 text-shadow 时常会遇到以下痛点：

• 阴影要么显得硬邦邦毫无层次感；要么过度模糊导致文字难以辨认。
• 不知道该把模糊半径设多大才合适，盲目增大数值只会让页面渲染变慢。
• 经常误把扩散半径当成模糊半径，导致阴影看起来像是“加粗”而不是“柔化”。
• 在响应式布局下同一个像素值在大屏和小屏的视觉效果相差甚远。

text-shadow: h-shadow v-shadow blur-radius color;

其中第三个参数 blur-radius 决定了阴影边缘的柔和程度。话说回来，它的单位是像素。只能为非负数：

• 0px → 阴影锐利、没有任何模糊。
• 0px → 阴影逐渐向外扩散，边缘越模糊视觉越柔和。

与字体大小、颜色对比的关系

模糊半径并不是越大越好。它需要结合文字的字号和背景对比度来调节：

• 小字号+高对比度：建议使用 1~2px 的轻微模糊，保持可读性。
• 大字号+低对比度：可以适当放宽到 4~6px，让阴影起到提亮作用。
• 彩色文字或渐变文字：使用更大的模糊半径可以软化颜色过渡。