.input-group边框重叠因子元素各自渲染边框与圆角，需显式归零相邻边角：.form-control设border-radius:0，首/尾子元素分别切右/左圆角，并确保.btn参与选择器；响应式下加flex-shrink:0和min-width防错位。
输入框与按钮在 .input-group 中的边框重叠，不是样式没生效，而是 Bootstrap 默认让每个子元素各自渲染圆角和边框，导致视觉上“双线”或“断开”。必须显式控制每个元素的特定边角，不能只靠父容器设 border-radius。
为什么 .input-group 的边框看起来重叠或错位
Bootstrap 的 .input-group 把 .form-control 和 .input-group-text（或 .btn）并排排列，默认都带完整边框。当它们紧挨着时，相邻边框会物理叠加——比如 .form-control 的右边框 + 右侧 .input-group-text 的左边框，就变成一条粗两倍的线；而圆角若没对齐，还会露出直角缺口。
常见错误现象包括：
- 右侧按钮和输入框连接处出现“白缝”或“黑线加粗”
- 鼠标悬停时，只有按钮或只有输入框高亮，边框不连贯
- 用
border: 1px solid #ced4da后，整体看起来像 2px 边框
.form-control 和 .btn 的边角必须手动归零
关键不是“加圆角”，而是“切掉不该出现的角”。Bootstrap 5 默认对 .input-group-text:first-child 设左圆角、对 :last-child 设右圆角，但 .form-control 自身仍保留默认的左右圆角，会覆盖组合逻辑。
实操建议用以下规则（直接覆盖默认行为）：
.input-group .form-control {
border-radius: 0;
}
.input-group .form-control:first-child {
border-top-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
}
.input-group .form-control:last-child {
border-top-left-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
}
.input-group .btn:first-child,
.input-group .input-group-text:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.input-group .btn:last-child,
.input-group .input-group-text:last-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
注意：.btn 必须参与选择器，因为很多场景是 <input> + <button class="btn"></button> 组合，而非 .input-group-text。
响应式下按钮宽度变化导致边框错位怎么办
当按钮文字变长、或屏幕缩小时，.btn 宽度撑开，可能让 .form-control 被压缩，其 border-radius 计算失效，圆角突然消失或变形。
解决方法不是调 flex，而是加一层保护：
- 给
.input-group加flex-wrap: nowrap，防止换行破坏布局 - 给
.btn加flex-shrink: 0，避免被压缩变形 - 若按钮内容动态变化（如加载中文字），统一用
min-width控制底线，例如min-width: 6rem
特别注意：不要给 .form-control 设 width: 100% —— 在 .input-group 中它会和兄弟元素抢空间，反而加剧边框错位。
用 gap 替代 margin 时边框又出问题？
如果在 .input-group 外层套了 .btn-group 或手动加了 gap，会导致按钮和输入框之间出现空白，边框不再接触，失去“合并”效果。
此时应：
- 删掉所有作用于
.input-group内部的gap，.input-group本身不是 Flex 容器（Bootstrap 5 是，但它的子项默认display: flex不暴露给开发者） - 若需间距，改用
.input-group-text包裹纯文本，再通过padding微调，比依赖gap更可控 - 检查 computed styles：如果看到
.form-control的display是inline-block，说明 JS 或自定义样式干扰了原始 Flex 上下文，必须还原为block或flex
最常被忽略的一点：边框是否重叠，最终取决于两个相邻元素的 border 是否在同一像素位置渲染。任何 transform、scale、或 sub-pixel 渲染偏差，都会让本该对齐的边框露出 0.5px 缝隙——这种问题只能靠 border-collapse: collapse（不适用）或重写 box-sizing + 精确 width 控制，而不是调圆角。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
