显示虚线轮廓是因为浏览器默认为其添加focus outline以满足可访问性，该outline无法用border属性控制，需用outline: none配合outline-offset和-webkit-tap-highlight-color彻底隐藏。
元素本身不渲染任何可见内容，所谓“边框轮廓”实际来自浏览器对可聚焦元素的默认 outline（焦点环），尤其在点击或键盘 Tab 进入时出现。它不是 border，也不能用 border: none 消除。
为什么
地图区域（）属于可聚焦的交互元素，Chrome/Firefox/Safari 默认为其添加 outline 样式以满足可访问性要求。该轮廓不随 border 设置变化，也不受父 或
- 仅当用户通过键盘 Tab 焦点到达该区域，或鼠标点击后仍保持焦点时才可见
- 轮廓颜色、宽度、样式由浏览器 UA 样式决定，通常为蓝色虚线
-
display: none或visibility: hidden会使区域失效，不可点击也不触发映射
隐藏
必须直接作用于 元素，且需覆盖 UA 样式。推荐以下组合：
- 显式设置
outline: none—— 基础但必要 - 补充
outline-offset: -2px（可选）—— 防止部分浏览器残留像素偏移 - 若需保留可访问性，改用
outline: 2px solid transparent+outline-offset: -2px，视觉隐藏但屏幕阅读器仍可识别
示例：
<map name="demo"><area shape="rect" coords="10,10,100,100" href="#" style="outline: none; outline-offset: -2px;"></map>
注意outline与border的根本区别
这是最容易混淆的点： 没有 border 概念，它的“边框感”100% 来自 outline。试图对它设 border: 0 或 border-color: transparent 完全无效，因为该元素不支持 border 属性（验证：DevTools 中查不到 border 相关 computed 样式）。
-
outline是绘制在元素外层的独立轮廓，不影响布局 - 它不响应
box-sizing，也不受overflow: hidden裁剪 - 移除后若影响键盘导航体验，应配合
aria-label或title提供语义补充
移动端 Safari 的特殊处理
iOS Safari 对 的焦点行为更保守：即使设了 outline: none，长按或双击后仍可能短暂闪现轮廓。此时需额外加：
-
-webkit-tap-highlight-color: transparent—— 消除点击高亮（仅限 Safari） - 确保
有明确的href或onclick，否则 Safari 可能忽略 focusable 状态
完整样式建议：
<area shape="circle" coords="50,50,30" href="#" style="outline: none; outline-offset: -2px; -webkit-tap-highlight-color: transparent;">
真正起效的关键就两行：outline: none 和确保元素可被正确识别为交互目标；其余都是为兼容边缘场景补的细节。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
