用box-shadow实现柔和光晕需高模糊值（40–100px）、半透色及足够内边距防裁剪；进阶可用伪元素+径向渐变+blur模拟自然打光，响应式建议用rem或clamp()并适配深色模式。
给图片加柔和的背景光晕，核心是用 box-shadow 配合半透明色和足够大的模糊值，再结合合适的容器结构来避免阴影被裁剪。
用 box-shadow 实现基础光晕效果
直接在图片或其父容器上添加多层、大半径、低强度的阴影，就能模拟自然光晕。关键参数：高 blur-radius（如 40–100px）、小甚至为 0 的 spread-radius、带 alpha 通道的颜色（如 rgba(255, 230, 180, 0.4)）。
示例 CSS：
img.glow {
box-shadow:
0 0 40px rgba(255, 230, 180, 0.4),
0 0 80px rgba(255, 200, 120, 0.2);
}
确保光晕不被裁剪（关键一步）
默认情况下，父容器可能设了 overflow: hidden，或图片自身没有留出扩展空间，导致阴影被截断。解决方法：
立即学习“前端免费学习笔记（深入）”；
- 给图片外层加一个 相对定位的容器，并设置足够内边距（如
padding: 40px） - 容器不设
overflow: hidden，且宽高允许内容溢出 - 图片本身设
display: block，避免行内元素基线留白干扰布局
进阶：用伪元素叠加渐变光晕（更自然）
单靠阴影有时显得“硬”。可额外用 ::before 伪元素画一个大圆角椭圆，填充径向渐变，并模糊它：
.glow-container {
position: relative;
display: inline-block;
padding: 50px;
}
.glow-container::before {
content: '';
position: absolute;
top: 50%; left: 50%;
width: 300px; height: 300px;
background: radial-gradient(circle, rgba(255,240,200,0.6) 0%, transparent 70%);
border-radius: 50%;
transform: translate(-50%, -50%);
filter: blur(30px);
z-index: -1;
}
这样光晕中心更亮、边缘更弥散，贴近真实打光效果。
适配响应式与深色模式的小技巧
光晕颜色建议用浅暖色（如米白、淡金），在深色背景下才明显；若页面支持深色模式，可配合 @media (prefers-color-scheme: dark) 微调透明度或色相，避免过曝。同时把 box-shadow 的像素值换成 rem 或用 clamp()，让光晕大小随屏幕缩放自然变化。
