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。
额外提示:
- 可以使用动画或过渡效果让发光更生动。
- 可以使用多个阴影叠加，创造更丰富的发光效果。
- 注意不同浏览器的兼容性，根据需要添加浏览器前缀。
希望这些信息能帮助你!
