outline比border更适合选中高亮，因其不占布局空间、避免重排抖动；默认仅键盘聚焦时显示，符合可访问性；需注意outline:0误删、透明色声明、focus-visible降级及移动端兼容性。
outline属性为什么比border更适合做选中高亮
因为outline不占布局空间，不会导致元素位移或重排。用border加粗时，如果没预留box-sizing: border-box或原始border-width为0，页面会“抖一下”——这是最常被忽略的视觉 bug。
-
outline是绘制在元素外层的独立轮廓，不影响width/height和相邻元素流式布局 - 默认
outline只在键盘聚焦（如 Tab）时触发，符合可访问性规范；而:hover下用outline需手动写伪类 -
outline-offset能控制高亮距离，比如设outline-offset: 2px让光晕“浮起来”，避免贴边压抑
:focus状态下outline不显示？检查这三件事
常见现象：点击 input 或按钮后没高亮，但代码明明写了outline: 2px solid #007bff。大概率是被浏览器默认样式或 CSS 重置干掉了。
- Chrome/Firefox 默认给
:focus加了outline: -webkit-focus-ring-color auto 1px，但某些 UI 库（如 Bootstrap）会全局设outline: 0，直接砍掉 - 检查是否误用了
outline: none且没配替代方案（比如只删 outline 却没加box-shadow聚焦效果） - 确保不是被
!important覆盖——尤其在使用 CSS-in-JS 或微前端场景下，样式优先级容易失控
用outline实现“拟态”或“发光”选中效果
纯outline只能画单层实线，想做柔和高亮得组合box-shadow。但别全扔给box-shadow——那样键盘聚焦时缺失语义，对屏幕阅读器不友好。
- 推荐写法：
outline: 2px solid transparent+outline-offset: 2px+box-shadow: 0 0 0 2px #007bff - 这样既保留
outline的语义和可访问性，又用box-shadow撑出视觉厚度 - 注意
outline-color: transparent不能省——否则部分旧版 Safari 会 fallback 到系统默认色，破坏一致性
移动端:focus不触发？改用:focus-visible更稳妥
手机点触input时，iOS Safari 和 Android Chrome 常不触发:focus的outline，尤其在 meta viewport 设置不当或元素无tabindex时。
立即学习“前端免费学习笔记（深入）”；
- 优先用
:focus-visible代替:focus，它只在键盘操作（Tab/Shift+Tab）时生效，触屏点击自动跳过，避免移动端误亮 - 需要兼容老浏览器（如 IE、旧版 Edge）时，用
@supports selector(:focus-visible)做渐进增强 - 别忘了给
button等交互元素显式加tabindex="0"，否则:focus-visible可能完全不响应
outline 的坑不在写法多难，而在它太安静——不出错时不显眼，一出错就是布局偏移、焦点消失、无障碍失效。留心outline-offset值、透明色声明、以及:focus-visible 的降级逻辑，比堆特效重要得多。
