img需设display:inline-block/block才能生效box-shadow；用clamp()动态控制模糊值；Safari圆角发光需overflow:hidden或padding；暗色模式应通过CSS变量动态切换发光色。
box-shadow 外发光必须设 display: block 或 inline-block
直接给 <img> 写 box-shadow 却没效果？大概率卡在 display 类型上。图片默认是 inline 元素，而 box-shadow 在部分浏览器（尤其是 Safari 和旧版 Chrome）对 inline 元素的 inset 和外发光渲染不稳定，甚至被忽略。
解决方式很简单：img.glow { display: inline-block; } 或 display: block;。加了之后立刻生效，且不影响布局流——inline-block 还能保留文字行内对齐能力，适合图文混排场景。
- 别用
display: flex或grid替代，那会改变盒模型行为，可能干扰border-radius圆角裁切 - 如果图片在链接里（
<a><img></a>），父级<a>也建议设display: inline-block，避免点击区域塌陷 - 移动端 iOS Safari 对
inline+box-shadow的兼容性最差，这一步不能跳
响应式模糊值要用 clamp() 而非固定像素
写死 box-shadow: 0 0 16px ... 在大屏上看很亮，在小屏手机上却糊成一团光斑——因为 16px 在 375px 宽屏幕上占了 4% 以上视口宽度，远超光学舒适区。
正确做法是用 clamp() 动态控制模糊半径：box-shadow: 0 0 clamp(4px, 2.5vw, 12px) rgba(255, 215, 0, 0.6);。它保证：小图（如头像）最小 4px 不发虚，大图（如 banner）最大 12px 不溢出，中间按视口宽度线性过渡。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 别用
em或rem，它们依赖字体大小，和图片尺寸无直接关系 -
clamp()在 Safari 15.4+、Chrome 100+、Firefox 102+ 均已稳定支持，无需前缀 - 如果需兼容 Safari 14 或更早，fallback 方案是媒体查询：
@media (max-width: 480px) { img.glow { box-shadow: 0 0 6px ... } }
圆角 + 发光要防 Safari 裁切光晕边缘
给图片加 border-radius: 50% 再套 box-shadow，在 Safari 上常出现光晕被硬生生“削掉一截”的现象——不是代码错，是它的渲染管线对圆角盒模型的阴影外扩计算不完整。
最轻量修复是给父容器加 overflow: hidden，强制 Safari 按圆角边界重新裁剪阴影区域；若父容器本身已有 overflow: hidden（比如卡片组件），那就得加 padding 预留空间：div.card { padding: 8px; overflow: hidden; }。
- 别依赖
outline模拟发光，它不支持模糊，且无法与border-radius同步圆角 - 如果必须用
filter: drop-shadow()贴合 PNG 边缘，记得加-webkit-filter前缀，并确保父容器padding≥ 模糊半径的一半 - 圆角值别写
50%就完事——先确认图片宽高相等，否则border-radius: 50%渲染出来仍是椭圆，光晕跟着拉长
暗色模式下发光色要动态切换
写死 rgba(255, 215, 0, 0.7) 在深色背景上刺眼，在浅色背景上又看不清。真正在意体验的项目，得让发光色随系统主题走。
推荐用 CSS 自定义属性 + @media (prefers-color-scheme: dark)：:root { --glow-color: #ffcc00; } @media (prefers-color-scheme: dark) { :root { --glow-color: #00c9ff; } }，然后在图片样式中引用：box-shadow: 0 0 clamp(4px, 2.5vw, 12px) rgba(var(--glow-color), 0.6);。
- 别用 JS 监听
prefers-color-scheme并改 class——CSS 原生方案零延迟、无闪烁 - 颜色别只换明度，冷暖也要调：浅色模式用金橙系提神，深色模式用青蓝系护眼
- 透明度（alpha）值保持不变，变的是基色，否则暗色下容易过曝
overflow 状态和图片自身的宽高比——这两点不校验，再漂亮的 box-shadow 参数也会在某个机型或缩放比例下突然失效。 
