因为bootstrap 4+输入框焦点效果依赖box-shadow和border-color，仅outline: none无效；须同时设box-shadow: none和border-color: #ced4da，并确保css加载顺序正确、选择器特异性足够。
为什么只设 outline: none 不够用
Bootstrap 4+ 的输入框焦点效果几乎完全依赖 box-shadow，而不是传统 outline。你看到的“蓝色外边框”，其实是 box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25) 这类值渲染出来的发光轮廓。单纯写 outline: none 对它毫无影响，页面依然会亮起一圈蓝光。
.form-control:focus 必须覆盖的两个关键属性
要彻底移除那圈蓝色外边框，必须同时重置以下两项，缺一不可：
-
box-shadow: none：直接干掉 Bootstrap 注入的发光阴影 -
border-color：否则聚焦时边框仍会从浅灰（#ced4da）变成深蓝（#80bdff），视觉上仍有“变色边框”感
推荐写法：
.form-control:focus {
outline: none;
box-shadow: none;
border-color: #ced4da;
}
为什么你的 CSS 没生效？检查加载顺序和特异性
常见失效原因不是代码错，而是：
- 你的自定义 CSS 文件在 Bootstrap CSS 之前加载，被后者覆盖
- 用了低特异性选择器，比如只写
input:focus，而 Bootstrap 用的是.form-control:focus，后者权重更高 - 项目用了 Sass/SCSS 并启用了
$enable-validation-icons: true等配置，间接影响了 focus 样式链
按钮也出现蓝边？同理处理 .btn:focus
如果点击按钮后也有类似蓝边，别只盯着 input —— Bootstrap 的 .btn 类同样靠 box-shadow 实现 focus 效果。需额外加：
.btn:focus,
.btn.focus,
.btn:active:focus,
.btn.active:focus {
outline: none;
box-shadow: none;
}
注意：移除所有焦点反馈会损害键盘用户的可访问性，若设计允许，建议用 border 或背景色变化替代，而不是完全“消失”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
