outline-offset 能让焦点框“浮起来”，但仅对 outline 生效且需配合 outline-style（如 solid）；正数向外偏移呈悬浮效果，负数向内偏移易被遮挡；常见错误是未设置 outline 或误用于 border。
outline-offset 能不能让焦点框“浮起来”
能，但只对 outline 生效，且必须配合 outline-style（比如 solid）才有视觉位移效果。它不改变元素尺寸或布局，纯粹是把轮廓线往内或往外推——正数往外“浮”，负数往内“陷”。
常见错误是设了 outline-offset 却没设 outline，结果什么也不显示；或者用在 border 上，完全无效。
-
outline-offset: 2px：焦点框离元素边缘 2px，看起来像悬浮一层 -
outline-offset: -2px：轮廓压进元素内部，可能被内容遮挡，慎用 - 值为
0时等同于默认贴边，不是“没轮廓”
focus-visible + outline-offset 组合为什么有时不生效
因为 :focus-visible 是浏览器根据用户输入方式（比如键盘 tab）自动触发的，鼠标点击默认不触发。如果只写 :focus-visible 而没兜底 :focus，鼠标点进去就看不到偏移后的焦点框。
实操建议直接用 :focus，或双写确保覆盖：
立即学习“前端免费学习笔记（深入）”；
button:focus {
outline: 2px solid #007bff;
outline-offset: 4px;
}
button:focus-visible {
outline: 2px solid #007bff;
outline-offset: 4px;
}
- Chrome/Firefox 对
:focus-visible的判定逻辑不同，Firefox 更激进 - 某些 UI 库（如 Ant Design）会重置
outline，得加!important或提高选择器权重 - 移动端 Safari 对
outline-offset支持不稳定，iOS 15+ 才较可靠
outline-offset 和 box-shadow 做视觉焦点有什么区别
outline-offset 是语义化的焦点指示，不影响布局、不响应点击区域、天然可访问；box-shadow 是纯装饰，要手动控制显示/隐藏，还容易干扰屏幕阅读器。
- 用
outline+outline-offset：浏览器自动管理焦点状态，无障碍支持开箱即用 - 用
box-shadow模拟：需监听focus/blur，且tabindex必须显式设置 -
outline不会触发重排（reflow），box-shadow在复杂动画中可能有性能抖动
自定义焦点样式时 outline-color 和 outline-width 怎么配
别只调 outline-offset，三个属性得协同：outline-style 必须非 none，outline-width 决定粗细，outline-color 决定辨识度。
常见坑是颜色太淡（比如浅灰配白背景）或太粗（outline-width: 4px 在小按钮上压迫感强）：
- 推荐组合：
outline: 2px solid #007bff+outline-offset: 3px - 深色模式下，
outline-color得随主题切换，硬编码会失效 - 不要用
outline: none彻底干掉焦点，改用透明色 + offset 保全可访问性
px、em），不能是百分比；而且它对 outline-style: auto（Safari 默认）无效，必须显式声明 solid、dashed 等。 
