伪元素 ::after 不能直接显示图片，但可作为光晕容器配合 radial-gradient 实现自然发光效果；需用 transform 替代 opacity 动画、@supports 降级、避免 overflow 裁切。
伪元素 ::after 能不能直接显示图片？不能，但可以绕过去
不能直接用 content: url(...) 做发光图层——它不支持背景混合、滤镜或渐变叠加，且加载失败时无法 fallback。真正靠谱的做法是让 ::after 承担「光晕容器」角色，图片本体仍由 <img alt="CSS如何利用after伪元素实现图片悬浮发光_通过径向渐变模拟css光晕效果" > 或背景图承载。
实操建议：
- 给图片容器（比如
div或figure）设position: relative，确保::after能绝对定位盖在上方 -
::after本身不放图片，只设宽高、圆角、background: radial-gradient(...)，再加opacity和filter: blur() - 必须显式设置
content: ""，否则::after不渲染 - 避免用
z-index: -1把光晕塞到图片底下——径向渐变会穿模，看起来像“内发光”，不是悬浮光晕
radial-gradient 的参数怎么配才像自然光晕？关键在色标位置和透明度
写成 radial-gradient(circle, #fff, transparent 70%) 很容易过曝或边缘生硬。真实光晕是中心亮、过渡长、边缘几乎不可见的淡影。
推荐写法（带注释）：
立即学习“前端免费学习笔记（深入）”；
background: radial-gradient( circle at center, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.2) 40%, rgba(255, 255, 255, 0) 75% );
说明：
-
circle at center比单纯circle更稳，避免某些浏览器默认偏移 - 三个色标中，第二段（40%）控制光晕“膨胀感”，太靠后会显得空洞；第三段（75%）决定消散长度，超过 80% 就难看出效果
- 全用
rgba而非hsla或命名色，方便微调透明度且兼容性更好 - 别用纯白
#fff——实际场景中光晕常带环境色倾向，比如浅黄（rgba(255, 245, 220, 0.5)）更耐看
hover 动画卡顿？transform 和 filter 的硬件加速陷阱
直接对 ::after 的 opacity 或 background-size 做 transition，大概率掉帧。浏览器无法为渐变背景或 opacity 变化触发 GPU 加速。
解法很明确：
- 把光晕层的显隐交给
transform: scale()控制（比如从scale(0.95)到scale(1.1)），配合opacity微调，比纯改 opacity 流畅得多 - 必须加
will-change: transform到::after上，否则 Chrome/Firefox 在首次 hover 时仍可能闪一下 - 避免在
::after上同时写filter: blur(10px)和transition: all 0.3s——blur 是重量级计算，应单独 transition：transition: transform 0.3s, opacity 0.3s - 如果父容器有
overflow: hidden，注意scale(1.1)可能被裁切，此时改用width/height配合transform-origin
IE 和旧版 Safari 不支持 radial-gradient？降级方案要轻量，别塞 polyfill
IE10+ 其实支持基础 radial-gradient（无方向关键词、无多色标），但 Safari ≤ 6.1 对 rgba() 在渐变中支持极差。强行兼容只会让 CSS 膨胀三倍。
务实做法：
- 用
@supports (background: radial-gradient(circle, red, blue))包裹光晕样式，不支持的浏览器自动跳过 - 降级时只保留最简反馈：比如 hover 时加个
box-shadow: 0 0 12px rgba(0,0,0,0.15)，比完全没效果强，也比 canvas 模拟轻量得多 - 别试图用
-webkit-radial-gradient写两套——现代项目早该放弃 Safari ≤ 6.1 - 如果必须支持 iOS 9，把渐变写成
radial-gradient(rgba(255,255,255,0.4), rgba(255,255,255,0))，去掉中间色标，它能认
