area元素不支持border样式，因其不可见且无盒模型；可用outline实现焦点反馈，需加tabindex="0"；真实边框需用SVG或canvas覆盖绘制，并绑定事件。
area 元素本身不支持 border 样式
直接给 <area> 标签加 style="border: 1px solid red" 是无效的——<area> 是透明的、不可见的语义标签，浏览器根本不渲染它的盒模型，CSS 边框自然无处可画。
用 CSS outline 模拟焦点边框（仅限交互反馈）
如果你只是想在用户用键盘 tab 切换到某个热区时显示轮廓（比如辅助访问场景），可以利用 :focus 配合 outline：
<map name="mymap"><area shape="rect" coords="10,10,100,100" href="#" alt="box" tabindex="0"></map><style>
area:focus {
outline: 2px dashed blue;
}
</style>
注意必须加 tabindex="0"，否则 <area> 默认无法获得焦点；outline 不影响布局，只作视觉提示，不能用于静态展示。
真正显示边框：用 SVG 或 canvas 覆盖绘制
要让边框“真实可见”，得绕过 <area> 的限制，用可渲染的图形元素替代或叠加：
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 把原图用
<svg></svg>重绘，用<rect></rect>/<path></path>定义区域，并设置stroke和fill="none" - 保留原
<img>，在其上方绝对定位一个透明<canvas></canvas>，用ctx.strokeRect()或ctx.strokePath()绘制对应区域边框 - 若仍需点击跳转，把事件监听绑定到 SVG 元素或 canvas 的点击坐标判断逻辑上，而不是依赖
<area>
例如 SVG 方案中，<rect x="10" y="10" width="90" height="90" stroke="red" stroke-width="2" fill="none" onclick="location.href='page.html'"></rect> 才能既看到边框又响应点击。
兼容性与维护成本提醒
纯 HTML + <map></map> + <area> 是最轻量的映射方案，但视觉控制为零；一旦需要边框、高亮、动画或响应式缩放，就必须引入 SVG/canvas + JS 坐标计算——这意味着 coords 值不再能直接复用，图片缩放时所有坐标都要动态重算，容易出错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
