用 box-shadow inset 多层叠加配合 @keyframes 实现自然呼吸光晕：需 border-radius: 50%、padding、多组渐变色阴影，动画用 opacity 与 scale 微调，避免 rotate，注意 Safari 兼容性及暗黑模式适配。

直接用 box-shadow + inset + @keyframes 就能实现，不需要 JS，也不用额外图片。关键不是“加光”，而是控制阴影的叠加顺序、模糊半径和动画节奏。

用 box-shadow 实现多层内发光光晕

圆形头像要发光自然，不能只打一层阴影——单层 box-shadow 容易发硬、边缘生硬。必须用逗号分隔的多组值，从内到外逐层扩散：

• border-radius: 50% 是前提，头像容器或 必须是正方形且圆角设为 50%
• 内发光必须配合 padding（比如 padding: 12px），否则 inset 阴影会被裁掉或紧贴边缘
• 推荐写法：box-shadow: inset 0 0 20px 4px #ff9a9e, inset 0 0 40px 8px #aaf2ff —— 第一组偏暖、范围小，第二组偏冷、范围大，形成粉蓝渐变光晕
• 注意：inset 阴影不支持 x/y 偏移做“方向感”，所有值都得是 0 0，靠模糊和扩展控制层次

让光晕「呼吸」起来：用 @keyframes 控制透明度与缩放

静态光晕容易显得呆板，加个轻微呼吸动效就能立刻提升质感。重点不是转圈，而是模拟光强自然起伏：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

• 不要用 transform: rotate()，那属于“旋转光效”，和“光晕”是两回事
• 推荐动画属性组合：opacity（0.6 → 1.0 → 0.6） + transform: scale()（0.98 → 1.02 → 0.98），幅度务必小，否则像在跳
• 时间函数选 cubic-bezier(0.3, 0.8, 0.5, 1)，比 ease-in-out 更柔和，避免机械感
• 动画时长建议 2.5s–4s，太短像频闪，太长看不出变化

兼容性与性能踩坑点

这个效果在现代浏览器跑得很稳，但有三个实际部署时容易翻车的地方：

• inset 阴影在 Safari 15.4 之前对 标签支持不完整，稳妥做法是用
  包裹 ，给

  加样式
• 同时开多个发光头像（比如用户列表），别每个都独立写 @keyframes，复用同一个动画名，避免 CSS 解析开销
• 如果页面开启暗黑模式，别忘了同步调整光晕颜色——比如深色背景上用 #fff 和 #aaf2ff 比粉蓝更通透，否则会发灰

真正难的不是写出来，而是调参：同一组 box-shadow 值，在不同屏幕亮度、不同背景色下观感差异很大。上线前至少在 iPhone、Mac Safari、Chrome DevTools 的 device emulation 里各看一遍真实渲染效果。