css制作发光
使用 text-shadow 实现文字发光效果
通过 text-shadow 属性为文字添加多层阴影，模拟发光效果。调整阴影颜色和模糊半径可控制发光强度。
.glow-text {
color: #fff;
text-shadow: 0 0 5px #ff00ff, 0 0 10px #ff00ff, 0 0 20px #ff00ff;
}使用 box-shadow 实现元素边框发光
为块级元素添加 box-shadow，通过扩展阴影范围和模糊效果实现发光边框。
.glow-box {
width: 200px;
height: 100px;
background: #333;
box-shadow: 0 0 10px 5px rgba(0, 255, 255, 0.7);
}结合动画增强发光效果
通过 CSS 动画动态改变阴影属性，实现呼吸式发光效果。
@keyframes pulse-glow {
0% { box-shadow: 0 0 5px 2px rgba(0, 255, 255, 0.5); }
50% { box-shadow: 0 0 20px 10px rgba(0, 255, 255, 0.9); }
100% { box-shadow: 0 0 5px 2px rgba(0, 255, 255, 0.5); }
}
.animated-glow {
animation: pulse-glow 2s infinite;
}使用 filter: drop-shadow() 实现复杂形状发光
适用于 SVG 或不规则形状元素，drop-shadow 会沿元素轮廓生成阴影。
.glow-svg {
filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.8));
}注意事项
- 颜色选择：高饱和度颜色（如霓虹色）发光效果更明显。
- 性能优化：避免过多层阴影或高频动画，可能影响渲染性能。
- 浏览器兼容性：
drop-shadow在旧版本浏览器中可能需要前缀。
