button:focus没反应是因为outline被设为none且未覆盖，应改用:focus-visible并配合outline-offset确保键盘导航可访问性。
button:focus 为什么没反应？先查 outline 是否被覆盖
直接写 button:focus { outline: 2px solid #007bff; } 却看不到效果，大概率是已有样式里写了 outline: none（比如重置 CSS 或 UI 框架自带），而你没覆盖它。浏览器默认的 focus outline 是最后兜底的，一旦被提前清除又没补替代方案，就真“隐身”了。
- 打开开发者工具 → 选中按钮 → 看 “Computed” 面板里的
outline值，确认是不是none - 如果确实是
none，别只改:focus，得在基础状态里也声明 outline 占位：button { outline: 2px solid transparent; outline-offset: 2px; } -
outline-offset很关键：不加它，新 outline 可能贴着边框难看清，尤其深色背景上
用 :focus-visible 替代 :focus，区分键盘和鼠标操作
用户点鼠标时显示焦点框，反而干扰视觉；但键盘 Tab 导航时没它，等于关闭了可访问性通道。:focus-visible 就是为这设计的——只在键盘触发 focus 时生效，鼠标点击自动跳过。
- 推荐写法：
button { outline: none; } button:focus-visible { outline: 2px solid #007bff; outline-offset: 2px; } - 旧浏览器（如 Safari :focus-visible，会直接回退到
:focus，所以仍需保留兼容层：button:focus { outline: 2px solid #007bff; } - 别用 JS 模拟判断：监听
keydown看是否按了 Tab 再加 class，既不可靠，又破坏原生焦点流
border + box-shadow 组合比纯 outline 更可控
单纯改 outline 颜色容易在高对比模式下失效（Windows 系统级主题会强制覆盖浅色 outline），而 border 和 box-shadow 更稳定，还能做圆角、阴影扩散等设计细节。
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 基础状态必须定义 border：
button { border: 2px solid transparent; border-radius: 6px; } - 聚焦时改颜色+加 shadow：
button:focus-visible { border-color: #007bff; box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2); } - transition 要写在默认状态：
button { transition: border-color 0.2s ease, box-shadow 0.2s ease; }，否则动画不触发 - 移动端 iOS Safari 对纯 CSS focus 渲染有时延迟，加
cursor: pointer可提升响应一致性
高对比模式下容易被忽略的致命细节
很多团队测试只关掉系统高对比模式，结果上线后收到大量键盘用户投诉：“找不到当前焦点在哪”。Windows 高对比主题会抹掉所有 background 和 shadow，只认 outline 和足够粗的 border。
立即学习“前端免费学习笔记（深入）”；
- 务必在
@media (forced-colors: active)里重定义：button:focus-visible { outline: 3px solid Highlight; } - 别依赖颜色差异：色觉障碍用户可能分不清蓝/灰 border，要配合宽度、虚实或 icon 变化（比如聚焦时加
scale(1.02)） - 真机测试不能省：模拟器常忽略系统级强制颜色逻辑，必须用开启高对比的实际设备跑表单流程
