html文字发光特效

使用text-shadow属性

text-shadow是CSS内置属性，通过设置阴影偏移量、模糊半径和颜色实现发光效果，基本语法：

text-shadow: h-offset v-offset blur color;

参数说明：

• h-offset：水平偏移（正值向右）
• v-offset：垂直偏移（正值向下）
• blur：模糊半径（值越大越模糊）
• color：阴影颜色（支持透明值）

基础示例：

<span style="font-size:50px; color:#fff; text-shadow: 2px 2px 5px #ff0000;">发光文字</span>

结合多重阴影层

通过逗号分隔多个text-shadow值，可叠加多层发光效果：

text-shadow:  
  0 0 3px #fff,    / 内层白光 /
  0 0 10px #f90,   / 中层橙光 /
  0 0 20px #f60;   / 外层红光 /

效果演示：

<div style="font-size:60px; color:#333; text-shadow: 0 0 3px #fff, 0 0 10px #f90, 0 0 20px #f60;">
霓虹灯文字
</div>

动态发光动画

利用CSS动画关键帧,实现呼吸灯式闪烁效果：

@keyframes glow {
  0% { text-shadow: 0 0 5px #0f0; }
  50% { text-shadow: 0 0 20px #0f0; }
  100% { text-shadow: 0 0 5px #0f0; }
}
.glow-text {
  animation: glow 2s infinite alternate;
}

应用示例：

<p class="glow-text" style="font-size:40px; color:#fff;">脉冲发光</p>

text-shadow vs drop-shadow对比表

渐变发光实现技巧

由于text-shadow不支持渐变色，可通过以下方式模拟：

1. 叠加半透明阴影：

   text-shadow: 
   0 0 3px rgba(255,255,255,0.7),
   0 0 8px rgba(255,255,0,0.6),
   0 0 15px rgba(255,0,0,0.5);

2. SVG滤镜方案：

   <svg width="0" height="0">
   <defs>
    <filter id="glow">
      <feGaussianBlur stdDeviation="4" result="blur"/>
      <feMerge>
        <feMergeNode in="blur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
   </defs>
   </svg>
   <span style="filter:url(#glow); color:#fff; font-size:50px;">渐变发光</span>

常见问题与解答

Q1：如何让发光效果不遮挡文字？
A：调整text-shadow的h-offset和v-offset为0，或使用半透明颜色。

text-shadow: 0 0 5px rgba(255,255,255,0.7);

Q2：低版本浏览器不支持怎么办？
A：可提供降级样式：

.glow-text {
  color: #333; / 默认颜色 /
  text-shadow: none; / 关闭发光 /
}
@supports (text-shadow: 0 0 3px #000) {
  .glow-text {
    text-shadow: 0 0 5px #0f0; / 现代浏览器样式 /
  }