outline 不适合美化聚焦边框，应改用 box-shadow 实现发光效果并保留可访问性；需避免 outline: none 全局移除，优先使用 focus-visible 和 outline-offset 微调。
outline 本身不适合用来“美化”聚焦边框——它不占据布局空间、无法圆角、不能精确控制位置，且浏览器默认会加虚线干扰视觉。真要美化聚焦状态，该用 border 或 box-shadow，outline 只适合保留可访问性焦点提示（比如键盘导航时）。
为什么不要直接用 outline 替代 border
直接覆盖 outline: none 再用 outline 模拟边框，会掉进几个坑：
-
outline始终居中绘制在元素边缘外侧，无法像border那样内嵌或控制内外偏移 - 不支持
border-radius，圆角聚焦效果完全做不出来 - 多个方向的 outline 宽度/颜色必须一致，没法实现“上边深、右边浅”这种设计
- 部分屏幕阅读器和高对比度模式依赖
outline显示焦点，粗暴设none会损害可访问性
正确做法：用 box-shadow 实现聚焦发光边框
这是目前最稳妥、最灵活的聚焦美化方式，不影响布局，支持圆角、颜色渐变、模糊扩散，且能与 outline 共存。
典型写法：
立即学习“前端免费学习笔记（深入）”；
input:focus {
outline: none; /* 先关掉默认 outline，避免双轮廓 */
box-shadow: 0 0 0 2px #007bff, 0 0 0 4px rgba(0, 123, 191, 0.2);
border-color: #007bff;
}- 第一层
box-shadow是实色聚焦环（紧贴边框），宽度由第三个值（2px）控制 - 第二层带透明度，制造“光晕”感；两层叠加模拟出有厚度的描边效果
- 务必保留
border-color变化，否则失去边框存在感，尤其在暗色背景下 - 如果输入框本身有
border-radius，box-shadow会自动跟随，无需额外处理
需要保留键盘焦点提示？请用 outline-offset + 可访问性适配
如果你的 UI 设计师坚持“所有焦点都要有明显 outline”，又不想牺牲美观，可以微调而非删除：
- 用
outline-offset: 2px把默认 outline 往外推，避开自定义box-shadow区域 - 改用高对比度的
outline-color，比如#000或#fff，确保在深色/浅色背景都可见 - 配合
@media (prefers-reduced-motion: reduce)关闭动画类阴影，但保留 outline - 绝对不要写
outline: none在全局:focus上——改用:focus-visible条件性隐藏
例如：
input:focus-visible {
outline: 2px solid #000;
outline-offset: 2px;
}
input:focus {
box-shadow: 0 0 0 3px rgba(0, 123, 191, 0.3);
border-color: #007bff;
}真正难的不是怎么画个好看的边框，而是让这个边框在鼠标点击、Tab 键切换、屏幕阅读器聚焦、高对比度模式下全都合理出现——outline 的存在意义不在视觉，而在可访问性链路里那个不可见却关键的环节。
