图片外发光必须用filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.7))，因box-shadow仅作用于矩形盒模型，会导致PNG透明边缘漏光；容器浮起则应使用box-shadow+transform组合。
给图片加阴影或发光，别直接套 box-shadow —— 它只围矩形盒子发光，PNG 透明边缘、圆角头像、镂空图标都会“漏光”。真正贴图轮廓的发光，得用 filter: drop-shadow()；而容器级浮起、卡片感阴影，box-shadow 才是正解。
图片外发光必须用 drop-shadow()，不是 box-shadow
box-shadow 对 <img> 无效？不，它有效，但效果错位：它渲染的是图片标签的矩形盒，不是图像像素轮廓。圆角头像四角突兀发亮、PNG 中间透明区被罩上光晕，就是典型症状。
-
filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.7))是正确写法：x/y 必须为0 0，blur ≥ 8px，color 推荐rgba()且 alpha 在 0.4–0.8 之间 - 别写成
drop-shadow(2px 2px ...)—— 那是位移阴影，不是发光 - Safari 旧版本对大 blur（>20px）支持不稳定，iOS 上建议控制在 12–16px 以内
- 父容器若设了
overflow: hidden，发光会被裁掉，检查 computed 样式中的overflow
给图片加卡片悬浮效果，用 box-shadow + transform
想让图片“浮起来”、有立体感？这是容器级需求，box-shadow 和 transform 搭配最稳，且必须用 <div> 包裹 <img>，不能直接作用于图片标签。
- 结构必须是：
<div class="card"><img src="..."></div>，.card设display: inline-block或block - 基础阴影：
box-shadow: 0 2px 6px rgba(0,0,0,0.1)；悬停增强：box-shadow: 0 6px 16px rgba(0,0,0,0.15) - 上浮靠
transform: translateY(-4px)，比margin-top更高效，不触发重排 - 圆角和裁剪靠
border-radius: 8px+overflow: hidden组合，直接给<img>加border-radius无法裁剪阴影
图片边框+阴影组合，先解决 display 问题
<img> 默认是 inline 元素，box-shadow 和上下 border 极易失效或错位——这不是代码错，是渲染模型限制。
立即学习“前端免费学习笔记（深入）”；
- 第一步永远是显式声明显示方式：
display: block（单图）或display: inline-block（图文混排） - 简单组合示例：
img { display: block; border: 2px solid #e0e0e0; box-shadow: 0 2px 6px rgba(0,0,0,0.1); } - 单位不能省：
2px不是2，否则整条规则可能被忽略 - 阴影被截断？90% 是父容器
overflow: hidden导致，临时加padding: 4px测试即可定位
发光动画要节制，别在 keyframes 里狂改 text-shadow
虽然标题问的是图片，但实际项目中常有人把文字发光和图片发光混用，尤其做按钮或 banner 时。这里强调一个高频翻车点：用 @keyframes 动画控制 text-shadow 发光强度时，别同时改全部 4–5 层参数。
- 只动一两个变量最稳：比如只切换两组预设值（用 CSS 自定义属性 +
transition），或只调某一层的blur-radius - 避免在动画中频繁修改全部阴影层，低端 Android 设备会卡顿，iOS Safari 可能直接跳帧
-
animation-timing-function: steps(1)无法离散插值text-shadow，浏览器不支持，别试
真正难的不是写对一行代码，而是分清「图轮廓发光」「容器浮起」「图文混排适配」这三类场景各自该用哪个 API；一旦混用，比如给 PNG 图片硬套 box-shadow，或者在 drop-shadow() 里写偏移值，效果就注定失真。
