最稳写法是box-shadow: 0 0 12px rgba(255,255,255,0.8)，但需设img为block/inline-block、用半透色、按图尺寸调模糊值（小图6–10px，大图14–20px），并避免白底吞光；drop-shadow按Alpha通道描边，适合透明图，box-shadow按矩形盒投光，适合实底图；层次感靠双层阴影叠加（如0 0 4px #ffcc00, 0 0 16px rgba(255,204,0,0.4)）；inset生效需padding+背景配合。
box-shadow 外发光边框怎么写才不糊
直接用 box-shadow: 0 0 12px rgba(255, 255, 255, 0.8) 是最常用也最稳的写法，但容易发虚或被背景吞掉。关键不是加多大模糊值，而是控制「光是否落在图片轮廓之外」。
常见错误现象：box-shadow 在白底网页上看不见光效、在深色背景上边缘泛灰、图片缩放后光晕断裂。
- 必须给
<img>设display: inline-block或block，否则 inline 元素下部分浏览器会裁切阴影 - 避免用纯
#fff，改用rgba(255, 255, 255, 0.7)或#ffffffcc，保证半透感 - 如果图片带白底，先包一层
<div style="background: #1a1a1a; padding: 4px;">，再把box-shadow加在<img>上，光才不会被吃掉 - 模糊半径别硬套 20px——小图用 6–10px，大图（>400px 宽）可用 14–20px，否则移动端会糊成一团
filter: drop-shadow 和 box-shadow 该选哪个
drop-shadow() 跟 box-shadow 看起来都是发光，但底层逻辑完全不同：前者按图片 Alpha 通道描边，后者按盒模型矩形框投光。
使用场景决定选择：drop-shadow 适合 PNG 透明图、剪贴画、不规则 SVG；box-shadow 更适合 JPG/WEBP 等带实底图、需要统一外轮廓光效的场景。
立即学习“前端免费学习笔记（深入）”；
- 用
drop-shadow时，参数必须是filter: drop-shadow(0 0 10px #ffcc00)，偏移量非零会导致光“飘走”，不是发光而是位移阴影 -
drop-shadow不支持inset，也不能叠加outline，想加内提亮必须配box-shadow: inset - 兼容性上，
drop-shadow在 Safari 15.4+、Chrome 100+、Firefox 102+ 稳定；老版本 Edge 需回退到box-shadow - 性能差异不大，但
drop-shadow对 GPU 友好些，尤其在滚动区域里大量图片时更顺
怎么让发光边框有层次感，不是一坨白光
单层阴影容易显得廉价，真实光晕有明暗衰减——近处锐利、远处弥散。靠叠加两层不同参数的 box-shadow 就能模拟。
示例代码：box-shadow: 0 0 4px #ffcc00, 0 0 16px rgba(255, 204, 0, 0.4)。第一层负责“勾边”，第二层负责“晕开”。
- 两层颜色最好一致或渐变色系，比如
#00ffff+rgba(0, 255, 255, 0.3)，避免撞色失真 - 模糊值差建议 ≥8px，比如 6px + 16px，太接近（如 10px + 12px）看不出分层
- 不要超过三层，第四层开始视觉上已无法分辨，反而增加渲染负担
- 若要配合 hover 效果，只放大模糊值（如 hover 时从 12px → 20px），别改颜色透明度，否则闪烁明显
为什么 inset 发光总不生效
box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.6) 写对了但没效果？大概率是图片没留“内侧空间”可发光。
内发光本质是向元素内部投射阴影，而 <img> 默认没有 padding，也没有背景，光直接被透明区域吞掉。
- 必须加
padding（哪怕只是padding: 1px），给inset阴影提供可渲染的“内边距区域” - 如果图片是 JPG 或背景不透明，
inset白光会被底色盖住，此时要先设background: #000或用透明 PNG -
inset不支持drop-shadow，别试filter: drop-shadow(inset ...)——语法非法，浏览器直接忽略 - 调试时可临时加
outline: 1px solid red，确认 padding 是否生效，再关掉 outline 看发光
drop-shadow 最省心；JPG 实底图配双层 box-shadow + 暗色容器最可控。 
