用css3实现文字发光的效果

CSS3 提供了几种方式实现文字发光效果，各有优缺点：

1. text-shadow (最常用且兼容性最好):

text-shadow 可以创建多个阴影，通过调整颜色和偏移量来模拟发光效果。它性能好，兼容性最佳，适合大多数场景。

.glow-text {
  color: #ee82ee; /* 文字颜色 */
  text-shadow: 0 0 5px #fff, /* 白色内发光 */
               0 0 10px #fff, /* 白色外发光 */
               0 0 15px #fff, /* 白色外发光 */
               0 0 20px #ee82ee, /* 文字颜色外发光 */
               0 0 30px #ee82ee, /* 文字颜色外发光 */
               0 0 40px #ee82ee; /* 文字颜色外发光 */
}

• 优点: 性能好，兼容性好，易于使用。
• 缺点: 发光效果比较单一，难以实现复杂的动态效果。

2. filter: drop-shadow() (更柔和的发光):

drop-shadow() 可以创建更柔和、更自然的发光效果，因为它考虑了alpha通道。

.glow-text {
  color: #ee82ee;
  filter: drop-shadow(0 0 5px #fff) 
          drop-shadow(0 0 10px #ee82ee);
}

• 优点: 发光效果更柔和自然。
• 缺点: 对文字以外的元素无效，兼容性略逊于 text-shadow。

3. box-shadow + text-fill-color (模拟霓虹灯效果):

利用 box-shadow 给文字容器添加阴影，然后使用 text-fill-color 将文字填充为透明，从而实现类似霓虹灯的发光效果。

.glow-text {
  color: transparent; /* 文字透明 */
  -webkit-text-stroke: 1px #ee82ee; /* 文字描边 (兼容性考虑) */
  text-stroke: 1px #ee82ee; /* 文字描边 */
  background-clip: text; /* 裁剪背景 */
  -webkit-background-clip: text; /* 兼容性 */
  box-shadow: 0 0 5px #ee82ee,
              0 0 10px #ee82ee;
}

/*  或者使用伪元素 */
.glow-text {
  position: relative;
}

.glow-text::before {
  content: attr(data-text); /* 使用data-text属性设置文本内容 */
  position: absolute;
  top: 0;
  left: 0;
  color: transparent;
  -webkit-text-stroke: 1px #ee82ee;
  text-stroke: 1px #ee82ee;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 5px #ee82ee); /* 使用filter实现更柔和的发光 */
}


<span class="glow-text" data-text="发光文字">发光文字</span>

• 优点: 可以实现霓虹灯效果。
• 缺点: 兼容性较差，需要额外的HTML结构 (伪元素或 data 属性)。

选择哪种方法取决于你的具体需求:

• 对于简单的发光效果，text-shadow 足够。
• 对于更柔和自然的发光效果，filter: drop-shadow() 更好。
• 对于霓虹灯效果，可以使用 box-shadow 和 text-fill-color。

额外提示:

• 可以使用动画或过渡效果让发光更生动。
• 可以使用多个阴影叠加，创造更丰富的发光效果。
• 注意不同浏览器的兼容性，根据需要添加浏览器前缀。

希望这些信息能帮助你!