button:focus 默认有虚线或蓝框是为保障键盘用户可访问性，chrome/safari 显示蓝色实线，firefox 显示虚线，本质由 outline 属性控制且无法仅用 outline: none 彻底移除。
button:focus 为什么默认有虚线或蓝框
浏览器给 button 加上的焦点轮廓，本质是可访问性保障：键盘用户按 Tab 键导航时，必须能清晰看到当前聚焦在哪。这个 outline 默认由 outline 属性控制，不是 border，也不影响布局，但样式因浏览器而异——Chrome/Safari 显示蓝色实线，Firefox 显示虚线，且无法用普通 outline: none 完全抹除。
只写 :focus-visible 会出问题
单独写 button:focus-visible { outline: 2px solid #007aff; }，鼠标点按钮后完全没焦点反馈。这不是样式没生效，而是浏览器根本没匹配到伪类，同时你又没给 :focus 留兜底。键盘用户按 Tab 进入时样式是对的，但鼠标用户点击后无法确认是否点中，尤其在工具栏密集区域，极易误操作。
必须共存 :focus（基础锚点）与 :focus-visible（键盘强化），顺序为 :focus 在前、:focus-visible 在后，并确保 :focus 提供轻量视觉提示：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
button:focus应设为淡色outline或微弱box-shadow，例如outline: 1px dotted #999; -
button:focus-visible必须显式覆盖outline，并带outline-offset: 2px避免与相邻元素粘连 - 绝对不要写
*:focus { outline: none; }，这会把:focus-visible的样式也干掉；若需重置，只针对具体选择器，如button:focus { outline: none; }
自定义可点击区域（如 div[role="button"]）怎么触发 focus-visible
不是加了 tabindex="0" 就万事大吉。浏览器对语义缺失的元素会拒绝激活该伪类，常见于：
<div role="button"> 类组件：必须监听 <code>keydown事件，响应Enter和Space，否则部分 Chromium 版本判定为“非交互意图”-
contenteditable容器：它自身不触发:focus-visible，需手动加tabindex="0"并在focusin中 JS 切换.focus-visible类来模拟 - 禁用态按钮（
aria-disabled="true"）：即使有tabindex="0"，也不该让它可聚焦——键盘用户会卡在不可用项上 - 用
* { -webkit-tap-highlight-color: transparent; }去掉点击高亮 - 慎用
touchstart+ JS 手动blur()，容易破坏键盘导航流 - 测试真机：模拟器常不触发真实 focus 流程，务必在 iPhone / Pixel 上验证 Tab 导航是否正常
- 实际项目里最容易被忽略的，不是怎么“去掉蓝框”，而是去掉之后没补上合规、可用的焦点指示——这会让整个表单对屏幕阅读器或键盘用户不可用
移动端点击高亮和 focus 冲突怎么解
在 iOS 和部分安卓浏览器中，点击 button 会先触发 :active，再短暂触发 :focus，同时叠加系统级点击高亮（灰色半透明 overlay），导致样式混乱。
