唯一可靠实现图片内发光边框的方式是box-shadow: inset 0 0 12px rgba(255,255,255,0.7)，因仅inset模式能向内扩散模糊光晕，且需PNG透明图源或深色容器包裹白底图，叠加双层阴影可增强真实感。
box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.7) 是唯一可靠实现图片内发光边框的方式，其他方法（如 outline、border、filter: drop-shadow()）全部无效。
为什么必须用 inset + box-shadow
内发光本质是光从图片内部边缘“透出来”，不是描边、不是投影、也不是滤镜轮廓包裹。只有 box-shadow 的 inset 模式能真正向内扩散模糊光晕：
• inset 关键字不可省略，缺了就是外发光
• 水平/垂直偏移必须为 0，否则光会偏移、不贴边
• 模糊半径建议在 8px–20px 区间，太小无效果，太大发虚
• 颜色必须带透明度（如 rgba(255,255,255,0.7) 或 #ffffffcc），纯色会像糊了一层白边
inset 发光在白底图上消失？这是正常现象
内发光依赖图片背景的“可透性”。如果图片本身是 JPG 或带白底的 PNG，inset 光会被不透明背景直接吞掉——不是代码错，是物理逻辑限制。
• 必须用 **PNG 且 Alpha 通道完整透明** 的图源
• 若只能用白底图，先包一层深色容器：<div style="background: #222; padding: 4px;"><img src="white-bg.jpg" style="box-shadow: inset 0 0 12px rgba(255,255,255,0.6)"></div>
• 绝对不要用 filter: drop-shadow() 试图模拟内发光——它不支持 inset，也根本不会向内作用
怎么让内发光看起来更真实、不单薄
单层 inset 容易显得平面化。叠加两层不同强度的阴影，能模拟光学衰减：近处亮而锐，远处淡而散。
• 推荐写法：box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.8), inset 0 0 16px rgba(255, 255, 255, 0.3)
• 第一层控制“提亮边缘”，第二层负责“柔化过渡”
• 不要叠加超过两层，否则 CSS 解析开销上升，尤其在低端 Android WebView 中易卡顿
• 圆角图片（border-radius）加 inset 发光时，Safari 可能轻微裁切光晕边缘，加 overflow: hidden 到父容器可稳定渲染
立即学习“前端免费学习笔记（深入）”；
常见报错和失效场景
遇到“写了 inset 却没光”，大概率踩了以下坑：
• <img> 是 inline 元素，默认不响应 box-shadow 的 inset 渲染 → 加 display: block 或 inline-block
• 父容器设了 overflow: hidden 且未预留足够 padding → 光晕被硬裁
• 使用了 background-color 直接盖在 <img> 上 → 内发光永远出不来，因为没有“内部空间”可发光
• 把 inset 错写成 insrt 或漏空格（如 inset0 0 12px）→ 浏览器直接忽略整条声明
真正难的不是写对那行 CSS，而是理解「内发光」只存在于透明与非透明的交界处——它不是装饰，是光学关系。一旦图源或容器破坏了这个前提，再调参数也没用。
