box-shadow: inset 是实现内发光的唯一正确方法，因其能向内绘制阴影并均匀包裹内容；需满足inset关键字前置、偏移为0、模糊半径适中，且依赖透明png与非裁剪容器。
内发光效果不能靠 border 或 outline 实现，必须用 box-shadow 的 inset 模式；否则光会跑出图片边缘，或者根本不出光。
为什么 box-shadow: inset 是唯一正解
内发光的本质是让光从图片内部边缘“透出来”，而不是在外部投下阴影。只有 box-shadow 带 inset 关键字时，阴影才会向内绘制——且它作用于整个盒模型，能均匀包裹图像内容区域。
-
filter: drop-shadow()只描边、不内填，对透明 PNG 有效，但无法产生“由内而外”的亮边感 -
text-shadow对图片完全无效，只作用于文字节点 - 给父容器加
background+padding再套box-shadow是绕路方案，容易错位、响应式失准
inset 参数必须满足的三个硬条件
漏掉任意一条，效果就会失效或偏移：
- 必须写
inset关键字，且放在颜色之前：box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.7) - 水平偏移和垂直偏移必须为
0，写成2px 2px就会变成“内侧偏移阴影”，光晕歪斜 - 模糊半径建议设在
8px–20px区间；太小（如2px）像描边，太大（如40px）会糊成一团灰
单层不够亮？叠加两层 inset 阴影
真实光学中，高光有锐利内缘 + 弥散外晕，CSS 也能模拟：
box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.8),
inset 0 0 16px rgba(255, 255, 255, 0.3);
- 第一层：小模糊 + 高透明度，紧贴边缘，提供“提亮感”
- 第二层：大模糊 + 低透明度，向外延展，撑起光晕体积
- 避免叠加三层以上，渲染开销明显上升，尤其在低端移动设备上
图片格式和容器背景很关键
内发光对源图和上下文敏感，常见翻车点：
- PNG 必须带透明背景；JPG 白底图直接套
inset，白光会被底色吞掉，看起来毫无效果 - 如果只能用 JPG，先包一层带浅灰/深色背景的
<div> 容器，再对 <code><img>应用inset - 父容器设了
overflow: hidden？那模糊光晕会被裁掉——检查是否意外触发了剪裁 - 千万别用
filter: drop-shadow()替代，它连“内”都做不到，纯属方向错误
真正难的是调参：模糊值、透明度、颜色明度三者要协同，稍一失衡就变“脏边”或“过曝”。建议在 DevTools 里实时拖动修改，比死记数值管用得多。
