边框消失是因为border: 0或border: none被意外激活，如使用border-0类、全局重置样式或父容器overflow: hidden裁剪所致，需检查devtools中实际生效的border声明。
边框消失是因为 border: 0 或 border: none 被意外激活
Bootstrap 输入框（如 .form-control）默认有边框，但它的边框样式依赖于多个 CSS 层级叠加。一旦你在自定义 CSS 中写了 border: 0、border: none，或用了 border-0 类，就会直接覆盖掉所有边框声明——包括宽度、样式、颜色，且这个规则权重极高（尤其是带 !important 的第三方重置样式）。浏览器开发者工具里能看到这条声明被“加粗”或没被划掉，就说明它正在生效。
-
border-0是 Bootstrap 内置的工具类，等价于border: 0 !important，只要加了就必然清空边框，删不掉它，其他自定义border声明全无效 - 某些 UI 组件库或全局重置 CSS（比如
* { outline: 0; border: 0; }）会无差别匹配，把.form-control也卷进去 - 如果用了
box-shadow模拟边框（比如只靠阴影做视觉边框），而你又把box-shadow: none加在:focus里，那非焦点态可能看起来“没边框”，其实是阴影被误当边框用了
border 工具类组合失效：线型（dashed/dotted）不生效
Bootstrap 的 border-dashed、border-dotted 等类只有在已有 border 基础上才起作用——它只改 border-style，不设 border-width 和 border-color。如果你只写 class="form-control border-dashed"，而没显式加 border 或 border-2，那最终渲染出来就是 border: 1px solid currentColor（solid 实线），因为 border-dashed 自身不启用边框，只是“修饰”已存在的边框。
- 正确写法是：
class="form-control border border-dashed border-primary"，顺序不能颠倒（border必须在前） - Bootstrap 5.2+ 才支持响应式边框类（如
border-md-dashed），旧版本写了也无效 - 移动端 Safari 对虚线边框渲染更敏感，有时 1px 宽度 + 高缩放会导致虚线“连成实线”，建议搭配
border-2或手动写border-width: 2px
父容器 overflow: hidden 裁掉了边框视觉
这不是边框真的没了，而是它被父元素“切掉”了。常见于用 .input-group 包裹输入框，又给外层加了 rounded 圆角 + overflow: hidden；或者自定义了 padding 或 transform 导致边框区域超出可视范围。开发者工具里看 computed styles 会发现 border-width 和 border-style 都正常，但渲染结果为空白。
- 检查父容器是否带
overflow: hidden、clip-path或mask类 - 临时删掉父容器的
rounded-类，看边框是否重现——如果是，说明圆角裁剪了边框边缘（尤其虚线在转角处易断裂） - 避免对
.form-control直接设margin负值来“拉出”边框，这会破坏 Bootstrap 的盒模型对齐逻辑
自定义 CSS 加载顺序或选择器权重不足
你的 CSS 文件如果在 Bootstrap 主样式之前加载，或者选择器太弱（比如只用 input:focus），就压不住 Bootstrap 默认的 .form-control:focus 规则。结果是你写的 border-color: red 看似生效，但实际被覆盖，最终边框颜色/宽度还是回退到 Bootstrap 默认值（比如 #ced4da），视觉上像“消失了”。
- 确保自定义 CSS 在
bootstrap.min.css之后引入 - 选择器至少和 Bootstrap 一样强：用
.form-control.custom-input:focus比单纯.custom-input:focus更稳 - 别依赖
!important解决问题，它容易引发后续维护冲突；优先用更具体的选择器或调整加载顺序
边框“消失”往往不是代码写错了，而是某一层隐式规则（比如 border-0、overflow: hidden、或加载顺序）悄悄接管了控制权。最可靠的做法是打开 DevTools，盯着 Elements → Styles 面板，逐条看哪些 border 声明被划掉、谁在覆盖它、computed 里真实生效的是哪一条——而不是凭 class 名字猜。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
