text-shadow 模糊半径顺序错误会导致整条规则静默失效，必须紧接垂直偏移后、颜色前；小字号文字模糊不宜超2px；发光效果需多层同中心叠加；失效常因父容器overflow、透明文字或字体平滑设置所致。
text-shadow 模糊半径写错顺序就完全不生效
浏览器对 text-shadow 参数顺序极其敏感，模糊半径（blur-radius）必须紧接在垂直偏移之后、颜色之前。写成 text-shadow: 2px #000 4px; 或 text-shadow: #000 2px 2px; 都会被静默忽略——不是“模糊没变”，而是整条规则失效。
合法写法只有这几种：
-
text-shadow: 1px 1px #000;（省略模糊，等价于1px 1px 0 #000） -
text-shadow: 1px 1px 2px #000;（完整四参数） -
text-shadow: 0 0 3px #ffcc00, 0 0 6px #ff6600;（多层发光，每层都需遵守顺序）
小字号按钮文字加阴影，blur-radius 超过 2px 就发虚
中文字体笔画密集，12–16px 的按钮文字对模糊特别敏感。设 blur-radius: 4px 看起来不是“更柔和”，而是边缘糊成一团、可读性下降。
实操建议：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 12px 及以下：用
blur-radius: 0或1px，靠多层位移模拟描边（如-1px 0 0 #000, 0 1px 0 #000, 1px 0 0 #000, 0 -1px 0 #000） - 14–18px 按钮：上限控制在
2px，深色背景可用rgba(0,0,0,0.25)提升对比 - iOS Safari 对 >12px 的
blur-radius渲染不稳定，标题级大字也别超过6px
想让按钮文字“发光”，单层 text-shadow 没用
写 text-shadow: 0 0 10px #fff; 看起来是灰雾，不是光晕。真正发光需要 4–5 层同中心、递增模糊的叠加，且所有偏移必须是 0 0。
推荐组合（兼顾跨浏览器与视觉重量）：
-
text-shadow: 0 0 3px #ffcc00, 0 0 6px #ff9900, 0 0 9px #ff6600;（暖色渐进，适合浅底按钮） -
text-shadow: 0 0 4px rgba(255,255,255,0.4), 0 0 8px rgba(255,255,255,0.2);（双层控透，适配深色背景） - 禁用纯白
#fff：易过曝失层次；也别混用box-shadow，它对文字本身无效，只会让整体发虚
写了 text-shadow 却看不到？先查这四个地方
90% 的“失效”和语法无关，而是渲染上下文被截断：
- 父容器设了
overflow: hidden，而发光阴影超出边界 → 在 DevTools 中检查 computedoverflow - 按钮文字颜色是
transparent或rgba(0,0,0,0)→text-shadow没有载体，不会凭空出现 - 用了
-webkit-text-fill-color: transparent做渐变文字，但忘了给该元素显式加text-shadow - macOS Safari 启用了
-webkit-font-smoothing: antialiased→ 会弱化小模糊值，临时关掉测试即可确认
最麻烦的是同一组 text-shadow 值，在 Windows 高分屏和 macOS Retina 屏上视觉重量可能差一倍——不能只看开发机，得实机多测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
