outline-style 必须显式设置为非 none 值，否则 outline-width 和 outline-color 无效；outline 不占布局空间但可通过 outline-offset 调整视觉位置；移除默认 focus outline 时须提供可访问替代方案。
outline-style 必须显式设置，否则 outline-width 无效
很多开发者写 outline-width: 2px 却看不到轮廓，根本原因是没设 outline-style。CSS 规定：只有 outline-style 不是 none 时，outline-width 和 outline-color 才会生效。
常见错误写法：button:focus { outline-width: 3px; } → 完全没效果
正确写法（任选其一）：button:focus { outline: 3px solid #007bff; }button:focus { outline-style: solid; outline-width: 3px; outline-color: #007bff; }
推荐用简写 outline，避免漏掉样式声明；若需动态控制宽度（比如 JS 修改），再拆开用 outline-width，但务必确保 outline-style 已存在。
outline 不占空间，但 offset 会影响视觉位置
outline 确实不参与布局计算，不会撑大元素、不影响 margin/padding、也不改变父容器高度——这点和 border 有本质区别。但它的绘制位置默认紧贴边框外沿，有时会和相邻元素视觉粘连。
这时要用 outline-offset 往外推一点：a:focus { outline: 2px dashed #007bff; outline-offset: 4px; }
注意：
• outline-offset 可为负值（向内缩，慎用，可能被裁剪）
• 它不继承，不触发重排，只影响绘制层
• 在高对比度模式或 Windows 高 DPI 下，部分浏览器对负 offset 支持不稳定
移除默认 focus outline 时必须提供可访问替代方案
直接写 *:focus { outline: none; } 是危险操作。键盘用户依赖这个轮廓识别当前焦点，移除后会导致 WCAG 2.1 AA 级别失败。
安全做法：
• 仅对有明确视觉反馈的元素禁用，如自定义按钮已加背景色变化
• 替换为更醒目的 outline（如双色、加粗、带 offset）
• 或改用 box-shadow 模拟轮廓（它可自由控制模糊/扩散，且无障碍工具通常仍能识别焦点状态）
示例（兼顾可访问性）：input:focus { outline: 2px solid #007bff; outline-offset: 2px; }button:focus-visible { outline: 2px solid #0056b3; }（配合 :focus-visible 更精准）
outline 在表单控件中行为特殊，某些值会被浏览器忽略
原生 <input type="radio">、<input type="checkbox"> 在 Chrome/Firefox 中对 outline-style: double 或 groove 会降级为 solid；outline-offset 对某些 checkbox 的伪元素也不生效。
原因：这些控件的 UA 样式表做了强约束，且部分轮廓渲染由操作系统控件接管。
应对策略：
• 优先测试真实设备 + 键盘 tab 导航
• 如需完全自定义外观，用 appearance: none 配合 box-shadow 或伪元素模拟
• 不要依赖 outline 实现复杂形状（比如圆角轮廓），它天生就是“不规则”的，但不可控
最易被忽略的一点：outline 的“非矩形”特性在高缩放比（如 175%+）或强制颜色模式下可能断裂或消失，这不是 bug，而是规范允许的行为——它本就不是为精确 UI 而设计的，焦点指示才是核心使命。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
