area 标签不渲染为可见元素，不支持 background-color、border 等任何视觉样式；真正生效的方案只有图像预处理或 css clip-path 叠加伪层；更推荐改用 svg 实现可样式化交互区域。

area 标签根本不能设 background-color 或 border

<area> 是图像映射（image map）中定义可点击区域的标签，它本身不渲染为可见元素——没有盒模型、不占文档流、没有宽高、也不支持 background-color、border、padding 等任何视觉样式属性。浏览器只会用它来响应鼠标坐标判断是否命中，样式设置会被完全忽略。

想让图像映射区域“看起来有背景或边框”，得换思路

真正能生效的方式只有两种，且都绕不开原图本身：

• 在图像编辑软件里，把目标区域预先画上高亮色块或描边，再导出为新图片；
• 用 CSS 的 clip-path + position: absolute 叠加一层伪视觉层（例如 <div>），按 <code><area> 的 coords 手动还原坐标并绘制；
• 注意：这种叠加层需与原图严格对齐，缩放、滚动、响应式布局下极易错位，维护成本高。

为什么不能用 :hover 或 JavaScript 动态加样式

即便监听 <area> 的 mouseover 事件，你也无法直接修改它的样式——因为 DOM 中它没有渲染节点。常见错误是写：area:hover { background-color: yellow; }，这毫无效果。可行替代是：


Doc To HTML
使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。
下载
• 用 event.offsetX/event.offsetY 计算鼠标相对于 <img> 的位置，再比对各 <area> 的 coords 判断是否进入；
• 若命中，动态显示一个绝对定位的 <div>，用 <code>clip-path 或 SVG <path></path> 模拟该区域形状；
• 但矩形 rect 还好办，circle 和 poly 的坐标解析和路径生成容易出边界偏差。

更现实的替代方案：改用 SVG

如果必须实现可样式化、可交互、可动画的区域高亮，<svg></svg> 是唯一推荐路径：

• 每个可点击区域用 <path></path> 或 <rect></rect> 描述，天然支持 fill、stroke、opacity、:hover；
• 坐标系与图像像素一一对应，缩放时自动适配（配合 viewBox）；
• 无障碍支持更好（可用 aria-label、role="button"）；
• 缺点是需将原图转为 SVG 背景或使用 <image></image> 元素嵌入，且多边形路径需手动转换 coords 坐标。

真正卡住多数人的点，不是“怎么写样式”，而是误以为 <area> 是个可视元素——它只是坐标+行为的声明，所有视觉反馈都得靠外部手段模拟，而且越复杂越不可靠。