CSS怎么添加光晕效果？CSS发光文字制作教程

在网页视觉设计中，光晕效果能让文字或元素从背景中“浮”出来，营造科技感或梦幻氛围。纯CSS实现光晕并不需要图片素材，核心是利用阴影属性模拟光线向四周扩散。文字光晕主要依赖text-shadow，而元素边框或卡片的光晕则用box-shadow。下面通过具体写法带你从零做出可控制的发光效果。

一、文字光晕的基础写法

text-shadow语法为“水平偏移 垂直偏移 模糊半径 颜色”，当偏移设为0、模糊半径大于0时，阴影会均匀包裹文字形成发光。最基础的白光文字如下：

.glow-text {
  color: #fff;
  text-shadow: 0 0 5px #fff;
}

上面只加了一层微光，看起来像细描边。若要更明显的晕染，应叠加多层不同模糊度的阴影。阴影层之间用逗号分隔，浏览器从前往后绘制，所以把最实的一层放前面。

多层发光推荐写法是用同色系由小到大模糊，并逐步降低不透明度，这样光感过渡自然：

.glow-text {
  color: #fff;
  text-shadow:
    0 0 4px rgba(255,255,255,0.8),
    0 0 10px rgba(255,255,255,0.5),
    0 0 20px rgba(120,200,255,0.4);
}

第三层换成淡蓝，可让白字带冷色环境光。注意模糊半径过大会导致文字变虚，一般标题控制在20px内。若用于深色背景，对比度足够；浅色背景需先把底层文字色压暗再发光。

二、彩色霓虹灯风格文字

很多运营页喜欢霓虹粉或青色发光，思路是文字本身用暗色，光晕用高饱和色。这样文字像被灯管照亮而非自身发光：

.neon {
  color: #fee;
  text-shadow:
    0 0 5px #ff00de,
    0 0 15px #ff00de,
    0 0 30px #ff00de;
}

这里三层都用同一洋红，模糊递增，形成由芯到外的光衰。如果想做呼吸闪烁，可配合animation改变阴影透明度：

@keyframes blink {
  0%, 100% { text-shadow: 0 0 5px #ff00de, 0 0 15px #ff00de; }
  50% { text-shadow: 0 0 2px #ff00de, 0 0 8px #ff00de; }
}
.neon { animation: blink 1.5s infinite; }

动画只动模糊和透明度，不换颜色，性能开销小。在低端安卓机上，过多阴影层加动画可能掉帧，建议发光层不超过三层，并避免同时给多个大字号标题加动画。

三、容器与按钮的光晕

除了文字，按钮或卡片常用box-shadow做外发光。box-shadow比text-shadow多一个“扩展半径”参数：水平 垂直 模糊 扩展 颜色。扩展为正会让阴影面积大于元素，适合做厚光：

.btn-glow {
  background: #222;
  color: #0ff;
  border: 1px solid #0ff;
  box-shadow: 0 0 8px #0ff, 0 0 20px #0ff;
}

上面用两个阴影层做出青色按钮光晕。若希望光只出现在 hover 时，可把阴影写进伪类，平时清零：

.btn-glow { transition: box-shadow .3s; }
.btn-glow:hover {
  box-shadow: 0 0 12px #0ff, 0 0 24px #0ff;
}

这种交互式光晕对用户体验更友好，也减少常驻渲染压力。需要提醒，box-shadow不占据布局空间，不会撑开父级，若光晕被裁切请检查父级是否写了overflow:hidden。

四、兼容与性能注意

text-shadow与box-shadow在现代浏览器均支持，包括移动端。但在某些旧版WebView中，多层阴影叠加会明显卡顿。可通过媒体查询在窄屏减少层数：

@media (max-width: 768px) {
  .glow-text {
    text-shadow: 0 0 6px rgba(255,255,255,0.6);
  }
}

另外，使用rgba颜色比十六进制更易控制光强。若设计稿要求精确色值，可用在线工具把HEX转成带透明度的RGBA。最后，发光效果本质是视觉修饰，应满足WCAG对比度，别让正文因光晕反而难以阅读。

掌握上述写法后，你可以组合文字与容器阴影，做出标题发光、按钮呼吸、卡片浮光等效果。核心口诀：零偏移、多层模糊、透明度递减、控制层数保性能。

CSStext-shadowbox-shadow修改时间：2026-08-02 17:39:31