css制作线发光
使用 box-shadow 实现基础发光效果
通过 box-shadow 属性为元素边缘添加发光效果。调整模糊半径和颜色可增强发光感：
.glow-line {
box-shadow: 0 0 10px 5px rgba(255, 255, 0, 0.7);
}- 参数说明：水平偏移量（0）、垂直偏移量（0）、模糊半径（10px）、扩展范围（5px）、颜色（半透明黄色）
结合伪元素创建动态光效
利用 ::before 或 ::after 伪元素制作更复杂的发光线条：
.dynamic-glow {
position: relative;
height: 2px;
background: transparent;
}
.dynamic-glow::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
box-shadow: 0 0 15px 3px #00ffea;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { opacity: 0.6; }
50% { opacity: 1; }
100% { opacity: 0.6; }
}渐变背景模拟霓虹效果
线性渐变配合背景裁剪实现高级发光线：
.neon-line {
height: 3px;
background: linear-gradient(
90deg,
transparent,
#ff00ff 20%,
#00ffff 50%,
#ff00ff 80%,
transparent
);
background-size: 200% auto;
animation: shine 3s linear infinite;
}
@keyframes shine {
to { background-position: 200% center; }
}SVG 滤镜实现高级光晕
通过 SVG 滤镜创建更真实的发光物理效果：
<svg style="display:none">
<filter id="glow">
<feGaussianBlur stdDeviation="3" result="blur"/>
<feComposite in="SourceGraphic" in2="blur" operator="over"/>
</filter>
</svg>.svg-glow {
filter: url(#glow);
stroke: #ff5500;
stroke-width: 2;
}文字边框发光特效
为文字描边添加发光效果：
.text-glow {
text-shadow:
0 0 5px #fff,
0 0 10px #fff,
0 0 15px #0073e6,
0 0 20px #0073e6;
color: white;
}
