css制作发光

CSS 发光效果实现方法

使用 box-shadow 属性 通过 box-shadow 可以创建简单的发光效果。调整模糊半径和颜色可控制发光强度：

.glow-effect {
  box-shadow: 0 0 10px 5px rgba(255, 255, 0, 0.7);
}

参数说明：水平偏移 | 垂直偏移 | 模糊半径 | 扩展半径 | 颜色（建议使用半透明色）

文本发光效果 结合 text-shadow 实现文字发光：

.text-glow {
  text-shadow: 0 0 8px #00ff00;
}

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

.multi-glow {
  text-shadow: 
    0 0 5px #fff,
    0 0 10px #fff,
    0 0 15px #0073e6;
}

动画发光效果 通过 CSS 动画让发光效果动态变化：

@keyframes pulse-glow {
  0% { box-shadow: 0 0 5px #ff0000; }
  50% { box-shadow: 0 0 20px #ff0000; }
  100% { box-shadow: 0 0 5px #ff0000; }
}
.animated-glow {
  animation: pulse-glow 2s infinite;
}

边框发光 使用 outline 或伪元素实现：

.border-glow {
  position: relative;
}
.border-glow::after {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border-radius: inherit;
  box-shadow: 0 0 15px rgba(0, 195, 255, 0.8);
  z-index: -1;
}

滤镜发光 CSS 滤镜的 drop-shadow 更适合不规则形状：

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

增强技巧

• 颜色选择：使用 HSLA/RGBA 颜色控制透明度
• 性能优化：避免在大量元素上使用动画发光
• 层级管理：通过 z-index 控制发光元素的堆叠顺序
• 响应式调整：使用 CSS 变量动态控制发光参数

浏览器兼容性

现代浏览器均支持上述属性，如需支持旧版浏览器应添加前缀：

-webkit-box-shadow: 0 0 10px #fff;
-moz-box-shadow: 0 0 10px #fff;