outline 不能替代 border，因为它不占据文档流空间、不影响布局，而 border 会撑开元素尺寸并触发重排；outline 默认按 content-box 绘制，不支持独立方向宽度、圆角或 box-sizing 调整。
outline 属性为什么不能替代 border
因为 outline 不占据文档流空间，也不影响布局，而 border 会撑开元素尺寸、触发重排。当你只想给聚焦状态加个视觉提示（比如表单输入框获得焦点时），用 outline 更安全——它不会让页面“抖动”或错位。
常见错误是直接删掉 outline: none 后发现焦点丢失了，其实只是轮廓被隐藏了，键盘导航依然有效，只是看不见。这不是 bug，是预期行为。
-
outline默认跟随元素内容盒（content-box）绘制，不支持box-sizing调整 - 不支持设置不同方向的独立宽度（如
outline-top-width不存在） - 不能设为圆角（
outline-radius无效，得用outline-offset配合border-radius模拟）
如何正确自定义 focus 状态的 outline 样式
最稳妥的方式是保留可访问性，只优化外观：在 :focus 伪类中重写 outline，同时用 outline-offset 微调位置避免贴边。
input:focus {
outline: 2px solid #007bff;
outline-offset: 2px;
}
注意点：
- 别用
outline: 0或outline: none彻底移除——这会让键盘用户失去焦点指示 -
outline-color设为transparent仍算有 outline，但不可见；某些浏览器（如旧版 Safari）可能忽略该组合 - 若要兼容高对比度模式，建议用
outline: auto（由系统决定样式），或至少保证颜色对比度 ≥ 4.5:1
outline-offset 的实际作用和坑
outline-offset 控制轮廓线与元素边缘的距离，正值向外偏移，负值向内（但通常不推荐负值，易被裁剪或视觉混乱）。
典型误用场景：
- 设了
outline-offset: -2px后轮廓被父容器overflow: hidden切掉 - 在 flex 或 grid 容器中，偏移后轮廓与其他元素重叠，审查工具里能看到但视觉上被遮挡
- 和
border-radius共用时，outline本身不圆角，只能靠增大outline-offset让它看起来“绕开”圆角
focus-visible 是更现代的替代方案吗
是，但不是“替代”，而是“补充”。:focus-visible 只在用户通过键盘触发焦点时生效，鼠标点击时不匹配，因此能兼顾体验与可访问性。
用法示例：
button:focus:not(:focus-visible) {
outline: none;
}
button:focus-visible {
outline: 2px solid #28a745;
outline-offset: 2px;
}
注意事项：
- 需要加
@supports selector(:focus-visible)做渐进增强，否则老浏览器会整个规则失效 - Chrome/Firefox 支持良好，但 Safari 直到 15.4 才支持，iOS 15.4+ 才可用
- 不要用
:focus-visible完全取代:focus，否则某些辅助技术（如开关控制）可能无法触发该伪类
真正难处理的是混合交互场景：比如触屏设备上，第一次点击可能是鼠标模拟，第二次又变成触摸，这时候 outline 的显示逻辑容易断裂。这类边界情况没有银弹，得结合 prefers-reduced-motion 和运行时检测权衡。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
