最实用方式是用 CSS box-shadow 搭配容器结构实现柔和光环，径向渐变作为进阶补充叠加在容器背景层；box-shadow 方案轻量兼容、响应快，伪元素+radial-gradient 可增强打光真实感。
在 H5 页面中，为产品主图添加背后柔和发光光环，最实用、兼容性好且可控的方式是用 CSS 的 box-shadow 搭配合理容器结构，而非强行用 Canvas 或复杂渐变。径向渐变（radial-gradient）可作为进阶补充，用于模拟更自然的“打光感”，但需注意它不是直接加在图片上，而是叠加在图片容器的背景层中。
用 box-shadow 快速实现柔和光环（推荐首选）
这是最轻量、响应快、全平台兼容的方案，特别适合移动端 H5：
- 给产品图外层容器（如
<div class="product-glow">）设置大模糊半径、低透明度的白色/浅暖色阴影 - 关键参数：水平/垂直偏移为
0，模糊半径建议40px–100px，扩展半径设为0或小值（如6px），颜色用rgba(255, 240, 220, 0.5)这类带透明度的浅暖色 - 必须确保容器有足够内边距（如
padding: 50px），且不设overflow: hidden，否则光环会被裁剪 - 示例代码：
.product-glow { padding: 50px; box-shadow: 0 0 60px rgba(255, 240, 220, 0.4), 0 0 100px rgba(255, 220, 180, 0.2); }
用伪元素 + 径向渐变增强真实打光感（进阶优化）
若希望光环中心更亮、边缘更弥散，贴近摄影打光效果，可在同一容器中用 ::before 伪元素绘制一个模糊的径向渐变圆：
- 伪元素设为
position: absolute，居中定位（top: 50%; left: 50%; transform: translate(-50%, -50%)） - 尺寸设得足够大（如
width: 400px; height: 400px），背景用radial-gradient(circle, rgba(255,245,230,0.7) 0%, transparent 70%) - 加上
filter: blur(25px)软化边缘，并设z-index: -1确保在图片下方 - 该层不参与交互，纯视觉增强，和
box-shadow可共存，叠加后光感更立体
避免踩坑的关键细节
实际开发中容易忽略但影响效果显著的几点：
- 图片本身设
display: block，防止行内默认基线留白导致位置偏移 - 深色背景页面下，光环色建议偏暖（米白、浅金），避免纯白过曝；支持深色模式时，可用
@media (prefers-color-scheme: dark)微调透明度 - 不要把
radial-gradient写进图片的background简写属性里——它必须出现在background-image中，且与图片 URL 用逗号分隔 - 若用 Canvas 实现（如需动态控制光晕强度），核心仍是
createRadialGradient(x0,y0,0,x1,y1,r1)，但 H5 产品页常规场景无需如此重方案
