用 box-shadow inset 多层叠加配合 @keyframes 实现自然呼吸光晕：需 border-radius: 50%、padding、多组渐变色阴影，动画用 opacity 与 scale 微调，避免 rotate，注意 Safari 兼容性及暗黑模式适配。
直接用 box-shadow + inset + @keyframes 就能实现，不需要 JS，也不用额外图片。关键不是“加光”，而是控制阴影的叠加顺序、模糊半径和动画节奏。
用 box-shadow 实现多层内发光光晕
圆形头像要发光自然，不能只打一层阴影——单层 box-shadow 容易发硬、边缘生硬。必须用逗号分隔的多组值，从内到外逐层扩散：
-
border-radius: 50%是前提，头像容器或<img alt="在网页制作中怎么用CSS3为圆形头像添加动态发光光晕？" >必须是正方形且圆角设为 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 控制透明度与缩放
静态光晕容易显得呆板，加个轻微呼吸动效就能立刻提升质感。重点不是转圈，而是模拟光强自然起伏：
- 不要用
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 之前对<img alt="在网页制作中怎么用CSS3为圆形头像添加动态发光光晕？" >标签支持不完整，稳妥做法是用<div> 包裹 <code><img alt="在网页制作中怎么用CSS3为圆形头像添加动态发光光晕？" >，给<div> 加样式 <li>同时开多个发光头像（比如用户列表），别每个都独立写 <code>@keyframes，复用同一个动画名，避免 CSS 解析开销 - 如果页面开启暗黑模式，别忘了同步调整光晕颜色——比如深色背景上用
#fff和#aaf2ff比粉蓝更通透，否则会发灰
真正难的不是写出来，而是调参：同一组 box-shadow 值，在不同屏幕亮度、不同背景色下观感差异很大。上线前至少在 iPhone、Mac Safari、Chrome DevTools 的 device emulation 里各看一遍真实渲染效果。
