css制作发光

使用 box-shadow 实现发光效果

通过 box-shadow 属性可以为元素添加外发光或内发光效果。外发光通过设置模糊半径和颜色实现，内发光需添加 inset 关键字。

.glow-effect {
  box-shadow: 0 0 10px 5px rgba(255, 255, 0, 0.7); /* 外发光 */
}
.inner-glow {
  box-shadow: inset 0 0 10px rgba(255, 255, 0, 0.7); /* 内发光 */
}

• 参数说明：x偏移 y偏移 模糊半径 扩散半径 颜色。
• 颜色建议使用 rgba() 调整透明度增强柔和感。

使用 text-shadow 实现文字发光

为文字添加发光效果可通过 text-shadow，原理类似 box-shadow，但仅适用于文本。

.text-glow {
  text-shadow: 0 0 8px rgba(255, 200, 0, 0.8);
}

• 多阴影叠加可增强效果：

  .text-glow-intense {
    text-shadow: 
      0 0 5px #fff,
      0 0 10px #ff0,
      0 0 15px #f80;
  }

结合动画实现动态发光

通过 @keyframes 和 animation 让发光效果动态变化，如呼吸灯效果。

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 5px rgba(255, 0, 0, 0.5); }
  50% { box-shadow: 0 0 20px rgba(255, 0, 0, 0.9); }
}
.pulse {
  animation: pulse-glow 2s infinite;
}

使用 filter: drop-shadow() 实现复杂发光

drop-shadow 可对非矩形元素（如SVG或透明PNG）添加发光，且能跟随元素形状。

.svg-glow {
  filter: drop-shadow(0 0 8px rgba(0, 255, 255, 0.6));
}

混合模式增强发光质感

通过 mix-blend-mode 实现发光与背景的混合效果，如 screen 或 lighten 模式。

.blend-glow {
  mix-blend-mode: screen;
  box-shadow: 0 0 15px #0ff;
}

注意事项

• 避免过度使用发光效果，以免影响可读性。
• 性能优化：减少高频动画或复杂阴影层级。
• 浏览器兼容性：drop-shadow 和混合模式需测试兼容性。