area标签不支持box-shadow或filter，需用绝对定位div模拟热区并应用drop-shadow；注意图片缩放时用JS重算坐标比例，确保发光层与实际热区对齐。
area 标签本身不支持 box-shadow 或 filter
直接给 <area> 元素写 box-shadow 或 filter: drop-shadow() 完全无效——它是个透明、无盒模型的替换元素，没有渲染区域，CSS 样式几乎不起作用。常见错误是以为加个 class 就能发光，结果刷新页面什么都没变。
真正可行的思路是：用 <map> 定义热区坐标，再用绝对定位的 <div> 覆盖对应位置，对这个 <div> 应用阴影或滤镜。
用绝对定位 div 模拟可发光热区
核心是把 <area> 的 coords（如 "100,50,200,150"）转为 CSS 的 top/left/width/height，再套上 filter: drop-shadow(0 0 8px #00f)。
- 必须确保父容器（通常是
<img>的包裹<div>）设了position: relative -
<div>的pointer-events: none可避免遮挡原图点击，但热区交互仍需靠原<area>触发 - 若热区是圆形（
shape="circle"），用border-radius: 50%配合drop-shadow效果更自然 - 注意
coords坐标系原点在图片左上角，别漏掉单位（像素值无需写px，但 CSS 中必须写）
动态生成发光层时注意坐标同步
如果图片缩放（比如响应式 max-width: 100%），<area> 的 coords 不会自动缩放，硬编码的 top/left/width/height 会偏移。此时不能只靠 CSS，得用 JS 计算比例：
立即学习“前端免费学习笔记（深入）”；
const img = document.querySelector('img');
const rect = img.getBoundingClientRect();
const scaleX = rect.width / img.naturalWidth;
const scaleY = rect.height / img.naturalHeight;
// coords = "x,y,w,h" → 转为 style.left = x*scaleX + 'px' 等
否则在高 DPI 屏或缩放页面下，发光框和实际热区完全错位。
filter: drop-shadow() 比 box-shadow 更适合热区轮廓
box-shadow 只沿矩形边缘发光，而 drop-shadow(0 0 6px #ff6b6b) 会贴合元素真实 Alpha 边缘（比如圆角或透明 PNG 区域），对非矩形热区更准确。
- 避免用
text-shadow——它只对文字生效 -
drop-shadow是 SVG 滤镜，性能略低于box-shadow，但热区数量少时无感 - IE 不支持
drop-shadow()，如需兼容，降级用box-shadow+ 矩形热区即可
