text-shadow 语法错误是发光失效主因，须严格按“水平偏移、垂直偏移、模糊半径、颜色”顺序书写，缺一不可；模糊半径需带单位，多层用逗号分隔；深色背景应配高对比亮色阴影；其仅支持外发光，内发光需伪元素等方案实现。
text-shadow 语法写错导致完全没效果
很多人复制网上示例，text-shadow 写了却看不到发光，第一反应是浏览器不支持——其实八成是语法顺序或参数缺失。它必须按「水平偏移、垂直偏移、模糊半径、颜色」顺序写，缺一不可，且前三个值不能为 0（除非你真想只改颜色）。
常见错误现象：text-shadow: #ff0000;（只写颜色）、text-shadow: 0 0 #000;（模糊半径为 0，等于没阴影）、text-shadow: 5px 5px 0px;（漏颜色，部分浏览器会忽略整条规则）。
- 正确写法示例：
text-shadow: 0 0 8px #ff6b6b;（居中模糊发光） - 要多层叠加发光（比如更厚的光晕），用逗号分隔：
text-shadow: 0 0 4px #fff, 0 0 8px #ff6b6b; - 注意：模糊半径单位必须带
px（或em等合法长度单位），不能写text-shadow: 0 0 8 #ff0000;
文字发光在深色背景上失效或发灰
发光本质是「带模糊的色块叠加在文字上」，如果背景和阴影颜色对比弱，或者阴影太淡，就根本看不出光效。尤其在深色背景（如 #121212）上用浅灰阴影（如 #ccc），几乎不可见。
使用场景：UI 标题、按钮悬停、代码高亮标签等需要视觉聚焦的位置。别指望它在低对比下自动变亮——CSS 不会智能提亮。
立即学习“前端免费学习笔记（深入）”；
- 解决办法：阴影颜色尽量比背景反差大，深背景配亮色（如
#ff9e00或rgba(255, 255, 255, 0.8)）；浅背景配深色+透明度控制强度 - 别滥用
rgba()的 alpha 值：设成0.1基本看不见，0.6–0.9更实用 - 性能提示：过大的模糊半径（如
50px）在低端设备上可能引起渲染卡顿，建议控制在20px以内
text-shadow 在 Firefox 或 Safari 中表现不一致
不是 bug，是渲染引擎对亚像素模糊的处理差异。Chrome 渲染的发光通常更“软”，Firefox 可能显得生硬或边缘锯齿，Safari（尤其是旧版）对多层 text-shadow 的叠加强度有时会衰减。
兼容性影响：所有现代浏览器都支持 text-shadow（IE10+），但「表现一致」不等于「像素级相同」。别拿 Chrome 效果当金标准去调其他浏览器。
- 实操建议：用
text-shadow+filter: drop-shadow()组合可增强一致性，但注意filter作用于整个元素盒，不是纯文字 - 调试技巧：在不同浏览器里打开开发者工具，逐个开关
text-shadow的每一层，观察哪一层最不稳定 - 关键点：避免依赖「精确发光轮廓」做 UI 对齐，比如不要假设发光边缘刚好卡在某个像素线上
用 text-shadow 模拟外发光 vs 内发光
text-shadow 天然只能做「外发光」——因为它是把影子画在文字轮廓之外。所谓「内发光」（光从文字内部透出）其实是错觉，得靠遮罩或伪元素模拟，不能单靠 text-shadow 实现。
容易踩的坑：有人尝试用负偏移（如 -2px -2px 4px #fff）假装内光，结果只是把光挪到左上角，文字本身还露在外面，毫无内嵌感。
- 真正接近内发光的做法：给文字加
background-clip: text+ 半透背景色，再配合text-shadow做微弱外缘柔化（仅辅助） - 更稳妥方案：用
::after伪元素盖住文字，设置filter: blur(2px)和透明度，再通过z-index和mix-blend-mode控制透出程度 - 记住：
text-shadow永远不会让文字中间变亮——它不改变文字本身的填充色，只加「额外图层」
