drop-shadow()是最贴合png透明图轮廓的外发光方案，作用于alpha通道，需设偏移为0 0，避免overflow:hidden裁切；box-shadow适用于非透明图，需四值写法并显式过渡；可叠加两层drop-shadow模拟光衰，响应式需用媒体查询分屏适配。
filter: drop-shadow() 是目前最干净、最贴合图片轮廓的外发光方案，尤其适合 PNG 透明图；box-shadow 虽然更通用，但只框矩形盒模型，对不规则边缘会漏光或显生硬。
用 drop-shadow() 实现真实轮廓发光
它直接作用于图像 Alpha 通道，光晕严格包裹锯齿/曲线边缘，不用额外 DOM 或伪元素。
- 必须写成
filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.7))—— 前两个偏移值必须是0 0，否则变成位移阴影 - 模糊半径建议从
8px起步，16px–24px更适配高清屏；太小看不出效果，太大在小屏上糊成一团 - 父容器不能设
overflow: hidden，否则发光部分被裁掉；若必须裁切，改用clip-path配合mask - Safari 旧版本需加
-webkit-filter前缀；IE 完全不支持，得回退到box-shadow或伪元素方案
用 box-shadow 给非透明图快速加光晕
适用于 JPG、背景色固定的图，或需要统一容器级发光（比如卡片内所有图同步发光）的场景。
- 关键参数是四值写法：
box-shadow: 0 0 12px 4px rgba(66, 153, 225, 0.6)—— 第四个值4px是扩张半径，决定光晕离图多远，漏掉它就变成紧贴描边 - 别用
hsl()或带空格的rgb()配 alpha，部分 Safari 对解析不稳定；坚持用rgba()格式 - 悬停动画必须显式过渡
box-shadow：transition: box-shadow 0.3s ease，只写transition: all在某些安卓 WebView 中会失效 - IE10+ 支持单层
box-shadow，但不支持多层叠加（如同时写内外阴影），降级时删掉inset部分即可
叠加两层 drop-shadow 模拟光学衰减
单层容易显得“平”，叠两层能做出由亮到暗的自然光晕层次，特别适合突出主体或做霓虹感。
- 写法是空格分隔：
filter: drop-shadow(0 0 8px #ffcc00) drop-shadow(0 0 16px rgba(255, 100, 0, 0.4)) - 外层颜色更淡、模糊更大，符合真实光衰规律；避免反着写（比如外层饱和、内层透明），视觉上会“发虚”
- 三层以上渲染开销明显上升，iOS Safari 小内存设备易卡顿；真要增强亮度，不如调高内层的 alpha 值
- 别混用
drop-shadow和blur()：filter: drop-shadow(...) blur(2px)会让整个图变糊，光晕失去锐度
响应式光晕：不同屏幕用不同模糊值
固定 12px 在手机上看太重，在 4K 屏上又像没加——媒体查询不是可选项，是必要项。
- 基础层写默认值：
.glow { filter: drop-shadow(0 0 10px #ffcc00); } - 平板起始：
@media (min-width: 768px) { .glow { filter: drop-shadow(0 0 16px #ffcc00); } } - 桌面大屏：
@media (min-width: 1200px) { .glow { filter: drop-shadow(0 0 24px #ffcc00); } } - 别用
rem或em单位写模糊半径，filter不支持相对单位；所有值必须是px或无单位数值（如12）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
