css制作线发光

使用 box-shadow 实现发光效果

通过 box-shadow 属性为元素边缘添加发光效果，调整模糊半径和颜色控制发光强度。

.glow-line {
  box-shadow: 0 0 10px 5px rgba(255, 255, 0, 0.7); /* 水平偏移 垂直偏移 模糊半径 扩展半径 颜色 */
}

• 参数说明：
  • 前两个值为阴影偏移量（通常设为 0 使阴影均匀环绕）。
  • 第三个值控制模糊程度，数值越大光线越柔和。
  • 第四个值控制阴影扩展范围。
  • 使用 rgba() 定义颜色和透明度（如 rgba(255, 0, 255, 0.5) 为半透明粉紫色）。

使用 text-shadow 实现文字发光

为文字添加发光效果，适用于标题或高亮文本。

.glow-text {
  text-shadow: 0 0 8px #00ff00; /* 水平偏移 垂直偏移 模糊半径 颜色 */
}

• 技巧：
  • 结合动画 @keyframes 可实现呼吸灯效果：

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

使用 outline 与 filter: drop-shadow()

通过 outline 结合 filter 实现更复杂的发光线条。

.glow-outline {
  outline: 2px solid #ff0000;
  filter: drop-shadow(0 0 8px #ff0000);
}  

• 适用场景：
  • outline 绘制基础线条，drop-shadow 为其添加发光（对虚线 outline-style: dashed 同样有效）。

使用渐变背景模拟发光

利用 linear-gradient 创建渐变背景，配合伪元素实现动态光效。

.glow-gradient {
  position: relative;
  height: 4px;
  background: linear-gradient(90deg, transparent, #00ffff, transparent);
}
.glow-gradient::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: inherit;
  filter: blur(10px);
}

SVG 实现高级发光线条

通过 SVG 的 feGaussianBlur 滤镜实现更细腻的光效。

<svg width="200" height="50" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="glow">
      <feGaussianBlur stdDeviation="3" result="blur" />
      <feComposite in="SourceGraphic" in2="blur" operator="over" />
    </filter>
  </defs>
  <line x1="10" y1="25" x2="190" y2="25" stroke="#ff00ff" stroke-width="2" filter="url(#glow)" />
</svg>

关键点：

• stdDeviation 控制模糊强度。
• stroke 定义线条颜色，stroke-width 定义粗细。

选择建议：

• 简单静态发光：优先使用 box-shadow 或 text-shadow。
• 动态效果：结合 CSS 动画或 SVG 滤镜。
• 复杂路径：SVG 方案更灵活。