在网页视觉设计中，让文字产生发光感可以显著提升标题的吸引力。CSS3提供的text-shadow属性允许我们为文字添加投影，而通过叠加多个不同模糊半径的阴影，就能伪造出光线向外散射的发光效果。这种方式纯靠样式实现，无需图片资源，也不会增加DOM节点。
一、text-shadow实现发光的基础原理
text-shadow的语法为text-shadow: 水平偏移 垂直偏移 模糊半径 颜色;。当偏移量设为0，仅保留模糊半径和亮色，阴影就会以文字轮廓为中心向四周晕开，形成发光。单层阴影往往不够柔和，因此通常会写多组阴影，让模糊半径从小到大递增，透明度从低到高，模拟光衰减。
需要注意，阴影颜色应使用比文字本身更亮的高饱和色，例如青色或玫红，在深色背景下对比明显。如果页面背景是浅色，发光效果会几乎不可见，所以发光设计一般配合暗色背景使用。另外模糊半径过大会导致文字边缘模糊不清，要在可读性与视觉效果之间平衡。
1.1 单色静态发光代码
下面是一段让标题呈现蓝色光晕的静态样式，我们叠加了三层阴影：
/* 深色背景上的蓝色发光文字 */
.glow-text {
background: #000;
color: #fff;
font-size: 48px;
font-weight: bold;
text-shadow:
0 0 5px #00eaff,
0 0 10px #00eaff,
0 0 20px #00aaff;
}
上述代码中，5px模糊提供紧贴文字的核心光，10px和20px逐渐扩大光晕范围。由于偏移为0，光从文字中心散出。你可以直接把类加到任意<h1>或<p>标签上观察效果。
这种写法的优点是兼容性好，主流浏览器均支持；缺点是需要手动调参，且多层阴影会增加一点渲染成本，但在普通文本上可忽略。
二、动态呼吸发光动画
静止发光有时略显单调，利用CSS3的@keyframes改变阴影模糊半径和透明度，可以做出类似霓虹灯呼吸的动画。我们通过动画周期让光晕强弱循环，增强活力感。
实现时建议只动画化模糊半径较大的那层阴影，避免每帧重绘所有层带来额外开销。同时使用will-change提示浏览器优化合成层。以下示例展示了一个粉色呼吸发光：
.breath-glow {
color: #fff;
font-size: 40px;
background: #111;
text-shadow: 0 0 10px #ff66cc;
animation: breath 2s ease-in-out infinite;
}
@keyframes breath {
0%, 100% {
text-shadow: 0 0 5px #ff66cc, 0 0 10px #ff66cc;
}
50% {
text-shadow: 0 0 15px #ff66cc, 0 0 30px #ff3399;
}
}
在0%和100%状态光较弱，50%时光晕扩大并变色，形成一呼一吸的节奏。该动画纯GPU合成，性能稳定。若项目需兼容老旧浏览器，可加上前缀或提供降级静态样式。
相比使用filter: drop-shadow或SVG滤镜，text-shadow方案代码量少、易于维护，但在要做复杂光斑变形时能力有限。常规字体发光需求用本文方案即可满足。
三、多色发光与实用建议
若想文字同时泛出多种颜色，可在text-shadow中混入不同色值的阴影层，例如同时写青色和紫色，形成赛博朋克风。但层数越多越难调，建议控制在四层内。
开发中可把发光样式抽成工具类，通过修改变量快速换色。下面用CSS变量演示可配置发光组件：
:root {
--glow-color: #00ffcc;
}
.easy-glow {
color: #fff;
background: #000;
text-shadow:
0 0 4px var(--glow-color),
0 0 12px var(--glow-color);
}
/* 切换主题只需改变量 */
.warm-theme {
--glow-color: #ffaa00;
}
利用变量，运营活动页可动态注入颜色，避免写死样式。最后提醒，发光文字在移动端也要注意对比度，防止光晕让小字难以辨认。合理字号加适度发光，才能兼顾美观与可用。
CSS3text-shadow字体发光修改时间：2026-08-05 21:03:28