当前位置：首页 > CSS

css制作线发光

2026-04-02 08:28:46CSS

使用 `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>

关键点：