当前位置：首页 > CSS

css制作发光

2026-02-13 04:56:21CSS

使用 `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); /* 内发光 */
}

使用 `text-shadow` 实现文字发光

text-shadow 可为文字添加发光效果，通过多层阴影叠加增强视觉效果。

css制作发光

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

结合动画实现动态发光

通过 CSS 动画动态改变阴影属性，可创建呼吸式发光效果。

css制作发光

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

.animated-glow {
  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.8));
}

霓虹灯效果实现

通过边框和阴影组合可模拟霓虹灯管效果，适合按钮或标志性元素。

.neon-button {
  border: 2px solid #00ffff;
  border-radius: 5px;
  box-shadow: 
    0 0 10px #00ffff,
    inset 0 0 10px #00ffff;
  text-shadow: 0 0 5px #00ffff;
}

标签: css