text-shadow 是实现文字发光效果的唯一原生 css 方案，必须设 offset-x 和 offset-y 为 0 才能均匀发光；多层写法容错率低，需严格按四值顺序书写；真机测试至关重要，尤其 ios 和微信 webview 有层数限制；小字号需注意 blur-radius 最小可见值，动画应调 alpha 而非 opacity，背景宜深色以保障对比度。
text-shadow 是实现文字阴影与发光效果的唯一原生 CSS 方案，不需要 SVG 或 JS 就能达成。它不是“可选技巧”，而是当前最稳定、兼容性最好、性能开销最低的路径。
为什么必须把 offset-x 和 offset-y 都设为 0？
发光效果的本质是光晕向四周均匀扩散，只要任一偏移非零（比如 0 2px 4px #000），阴影就会向下“坠落”，变成普通投影而非发光。浏览器不会自动居中补正——它严格按参数渲染。
-
0 0 5px #fff✅ 光晕饱满对称 -
0 1px 5px #fff❌ 文字底部明显变厚，顶部发虚，像被压扁 -
1px 0 5px #fff❌ 左侧边缘糊，右侧锐利，视觉失衡
多层 text-shadow 的写法容错率极低
每层必须完整写出四个值，漏一个或顺序错，整条声明会被浏览器静默丢弃——你不会看到报错，只会发现“没效果”。这不是 bug，是 CSS 解析规则。
Wechat MP Article Stats Comments Suite - 微信公众号管理套件
下载
公众号运营：文章发布至草稿、样式封面、评论与用户管理、数据统计等。用户要求将 Markdown 发送到公众号草稿、查看阅读量统计或类似后台操作时，使用本技能。
- 正确：
0 0 1px hsla(240,100%,70%,0.6), 0 0 2px hsla(180,100%,65%,0.5) - 错误：
0 0 1px hsla(...), 0 0 2px—— 缺 color，第二层失效 - 错误：
0 0 #0af, 0 0 4px #f0f—— 第二层的#f0f被当成blur-radius，实际解析为模糊文字
真机测试比 DevTools 更关键
Safari（尤其 iOS 14 及更早）和微信内置 WebView 对单条 text-shadow 的层数有硬限制。Chrome 模拟器显示四层正常，但 iPhone 实测可能只渲染前两层，第三、四层直接跳过。
- 务必在 iPhone 真机 + 微信最新版打开验证，不能依赖桌面模拟
- 若需强兼容，降级用双层：
0 0 2px #00f, 0 0 12px #f0f，牺牲层次保功能 - 字体
font-size小于 16px 时，blur-radius小于 1px 的层在 Retina 屏上不可见
别碰 opacity 动画，改 text-shadow 里的 alpha
给文字加 opacity: 0.8 动画，会让文字本体和所有光晕一起变淡，效果像灯泡电压不足；真正要动的是光晕“浓度”，也就是每层里的 alpha 值。
- 正确动画写法：
text-shadow: 0 0 1px hsla(...,0.3), 0 0 4px hsla(...,0.2)→ hover 时改为...,0.8), ...,0.6) - 父容器禁用
overflow: hidden—— 光晕向外扩散，裁剪等于砍掉最外两层 - 背景必须深色，浅底白光晕会发灰、无对比，Safari 上甚至不可见
blur-radius 的跳档比例和 alpha 衰减节奏。1px→2px→4px→8px 不是凭空推荐，是实测在不同设备 DPI 下保持体积感不塌陷的最小可行组合。写错一层参数，整条就废——它不报错，只沉默。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
