真正发光需2–3层text-shadow叠加：内层小模糊（2–4px）勾勒数字轮廓，外层大模糊（10–20px）扩散光晕，颜色须具明度/透明度梯度且适配背景，偏移量必须为0 0，否则仅显糊边无体积感。
直接用 text-shadow 做数字时钟发光效果，不是叠得越多越亮，而是必须控制好模糊半径梯度、颜色透明度和背景适配——否则只会看到一圈糊边，根本不像光。
为什么单层 text-shadow: 0 0 15px #fff 在数字时钟上不发光
因为浏览器渲染时，单层大模糊只产生一个均匀发散的“毛边”，没有明暗过渡，人眼识别不出体积感和能量感。数字时钟字体通常较粗、边缘硬，更需要内核清晰+外晕柔和的双层结构来模拟真实发光。
- 内层（2–4px）负责勾勒数字轮廓，用
rgba(255, 255, 255, 0.8)这类高透实色，避免吃掉字形细节 - 外层（10–20px）扩散光晕，用更淡、略偏色的
rgba(100, 200, 255, 0.4)或rgba(255, 215, 0, 0.5)，制造衰减感 - 所有阴影的前两个参数（水平/垂直偏移）必须是
0 0，否则会位移，变成投影而非发光 - 深色背景（如
#121212）可用蓝白/青黄系；浅色背景（如#f8f9fa）务必改用低饱和黑灰：0 0 3px rgba(0,0,0,0.2), 0 0 10px rgba(0,0,0,0.1)
text-shadow 多层叠加时的性能与可读性红线
数字时钟常配合 setInterval 每秒重绘，若 text-shadow 层级过多或模糊半径过大，iOS Safari 和低端安卓 WebView 容易掉帧或闪烁。
- 推荐严格控制在 2–3 层：例如
0 0 3px rgba(255,255,255,0.7), 0 0 12px rgba(100,200,255,0.4), 0 0 20px rgba(0,150,255,0.2) - 单层
blur-radius > 25px在移动端大概率触发渲染降级，尤其配合transform或opacity动画时 - 小字号（
font-size: 14px以下）慎用发光，光晕会吞掉数字“8”的中间空洞、“0”的闭合感；建议从font-size: 24px起调 - 动画中动态增强发光（如 hover 或夜间模式切换），需提前加
will-change: text-shadow，否则首帧卡顿明显
父容器裁切导致发光“被砍一刀”怎么快速定位
数字时钟常套在固定宽高的 .clock 容器里，而大模糊阴影本质是向外扩展像素区域——一旦父元素有 overflow: hidden、line-height 过小或 height 刚好卡死，光晕就被硬裁掉。
- 用浏览器开发者工具选中数字元素，看 computed 样式里
text-shadow是否生效（未被划掉） - 临时给父容器加
outline: 1px solid red，观察发光是否超出 outline 边界 - 检查是否设置了
line-height: 1或height: fit-content且未预留余量；建议设line-height: 1.3并加padding: 8px - macOS 上若发光发虚，可加
-webkit-font-smoothing: antialiased关闭子像素渲染，让阴影更锐利
真正难的不是写对那几行 text-shadow，而是每次换背景色、换字体、换设备尺寸，都得重新调三层颜色和模糊值——没有一劳永逸的参数，只有靠开发者工具实时试、对比着看。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
