area标签点击后虚线框本质是outline而非border，应使用map area{outline:none}清除；若area有交互逻辑，须补充:focus视觉反馈以保障键盘可访问性。
area 标签点击后虚线框的本质是 outline，不是 border
很多人误以为那是边框（border），所以去查 border: none 或改 border-width，结果完全无效。它其实是浏览器对可聚焦元素（如 <area>）在获得焦点时渲染的默认 outline，属于焦点指示样式，和表单控件、链接的行为一致。
最简有效的 CSS 写法：map area { outline: none; }
必须用 map area 这样的组合选择器，因为 <area> 本身不可直接加 class 或 id，也无法被常规 CSS 伪类（如 a:focus）精准捕获。单独写 area { outline: none; } 在多数浏览器中不生效。
-
map area是唯一稳定覆盖所有现代浏览器（Chrome/Firefox/Safari/Edge）的选择器路径 - IE6–7 不支持
outline，但它们也不渲染<area>的焦点虚线，所以无需额外兼容 - 不要写
outline: 0—— 这是过时写法，语义错误，部分浏览器会忽略
JavaScript 备选方案：onfocus="this.blur()" 不推荐用于 area
虽然给 <img> 加 hidefocus="true" 或给 <area> 加 onfocus="this.blur()" 能“绕开”焦点，但存在明显问题：
-
<area>是 void 元素，HTML 标准不允许在它上面写事件属性（如onfocus），部分解析器会静默丢弃 - 即使生效，也会破坏键盘用户的可访问性：按 Tab 键无法感知当前聚焦区域，违反 WCAG 基本要求
- Firefox 对
<area>的焦点行为本就较弱，强行 blur 可能导致焦点丢失后无法恢复
必须搭配可访问的替代聚焦样式（尤其当 area 有交互逻辑时）
如果 <area> 实际承载了 JS 点击处理（比如弹窗、跳转、状态切换），单纯去掉 outline 后，键盘用户将彻底失去操作反馈。此时应补充视觉提示：
- 用
map area:focus { box-shadow: 0 0 4px 2px #3b82f6; }模拟高亮（注意：不能只靠颜色，需满足 WCAG 3:1 对比度） - 更优解是配合
:focus-visible：只在键盘触发焦点时显示轮廓，鼠标点击则隐藏 —— 但需注意：<area>目前在 Safari 和旧版 Firefox 中对:focus-visible支持不稳定，慎用 - 真正关键的一点：多数项目里
<area>都只是跳转链接，这种情况下建议直接用普通<a></a>+ CSS 定位模拟热点，可控性、可访问性、调试成本都更低
map area { outline: none; } 足以解决 95% 的视觉干扰问题，但只要 <area> 承载了非跳转逻辑，就必须补上键盘焦点反馈 —— 这不是“美化需求”，而是基础可用性底线。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
