不能用 outline: dashed 实现链接点击虚线框，因浏览器不支持该组合；应改用 border-bottom: 1px dashed #007bff 并配合 text-decoration: none 和 a:focus,a:active 统一设置，兼顾视觉效果与可访问性。
outline: dashed 不能直接用于 a:active 或 a:focus
想让链接点击时显示虚线框，不能靠 outline: dashed —— 因为 outline 只接受 solid、dotted、dashed、double 等值，但这些是「轮廓样式」，不是「边框样式」；而浏览器对 outline 的 dashed 渲染支持极差：Chrome、Firefox、Edge 均不识别 outline: 2px dashed #007bff，只会退化为 solid 或直接忽略。
常见错误是写成：
a:active { outline: 2px dashed #007bff; }
结果什么都没变，或只看到实线。这不是你写错了，是浏览器根本不实现这个组合。
真正能稳定画出虚线框的只有 border-bottom + text-decoration
要视觉上“像点击后出现虚线下划线”，必须放弃 outline，改用 border-bottom 模拟。它支持完整的虚线控制，且所有现代浏览器一致生效。
-
border-bottom: 1px dashed #007bff是可靠起点 - 必须先移除默认下划线：
text-decoration: none - 若链接含图片，还需加
vertical-align: middle防止 baseline 错位 - 在
a:hover或a:active中设置该 border，才能做到“点击时才出现”
示例：
a {
text-decoration: none;
}
a:active {
border-bottom: 1px dashed #007bff;
padding-bottom: 2px; /* 让虚线不贴底，更清晰 */
}
IE8–IE11 下 a:active 触发延迟或不触发？检查 tabindex 和 focusable 状态
在旧版 IE 中，a:active 可能不生效，常见原因有：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 链接没有
href属性（如<a>文字</a>），此时它不可聚焦，:active不会触发 - 链接被设为
tabindex="-1"或disabled，导致失去激活能力 - CSS 选择器权重太低，被其他规则覆盖（比如全局
a { outline: none; }写在后面）
验证方式：打开开发者工具，在 Elements 面板中手动给 <a></a> 元素添加 class="debug-active"，再写 .debug-active:active { border-bottom: 1px dashed red; } —— 如果这时能生效，说明是原始选择器或 HTML 结构问题。
别忘了可访问性：键盘用户依赖焦点可见性
用 border-bottom 替代 outline 后，a:focus 状态仍需提供等效视觉反馈。否则 Tab 切换时用户完全看不到当前焦点在哪。
推荐做法是统一设计 :focus 和 :active 的表现：
a:focus,
a:active {
outline: none;
border-bottom: 1px dashed #007bff;
padding-bottom: 2px;
}
如果项目要求 WCAG 合规，还应确保该虚线足够明显（对比度 ≥ 4.5:1），且不依赖颜色单一识别（可叠加 box-shadow 或背景色微调）。
真正难的不是画出虚线，而是让虚线只在该出现的时候出现、该消失的时候消失，同时不把键盘用户的路堵死。
