.input-group边框“断开”是因子元素各自渲染border-radius未协同清除非连接处圆角；Bootstrap 5仅首尾元素设对应圆角，中间元素需手动置零并单独补角。
为什么.input-group的边框看起来“断开”或“错位”
根本原因不是边框没画出来，而是多个子元素（比如 .form-control 和 .input-group-text）各自渲染自己的 border-radius，又没协同清掉中间连接处的圆角。浏览器按顺序绘制：左边元素带右上/右下圆角，右边元素带左上/左下圆角，结果视觉上像被“切了一刀”。
常见现象包括：
- 左侧 addon 和 input 之间出现细白缝
- input 右侧圆角被 addon 覆盖，只剩一半弧度
- 响应式缩放后圆角突然消失或变尖
.input-group内各元素的border-radius谁说了算
Bootstrap 5 默认只给首尾元素设对应边角，中间元素保持直角——但这个逻辑依赖于 DOM 顺序和 class 名称严格匹配。一旦你加了额外 wrapper、用了 input[type="search"]、或者在 addon 里嵌套了 button，默认规则就失效。
关键点：
-
.input-group > .form-control:first-child会清掉右圆角（border-top-right-radius: 0） -
.input-group > .input-group-text:last-child会清掉左圆角 - 但如果你把
.form-control放在中间（比如前后都有 addon），它既不是:first-child也不是:last-child，就会保留默认圆角 → 导致重叠或断裂
用 CSS 选择器精准切断中间圆角
别碰整个 .input-group 的 border-radius，直接控制子元素的单边：
- 给所有非首尾的
.form-control 和 .input-group-text 强制设 border-radius: 0
- 对首元素单独补左圆角（
border-top-left-radius 和 border-bottom-left-radius）
- 对尾元素单独补右圆角（
border-top-right-radius 和 border-bottom-right-radius）
.form-control 和 .input-group-text 强制设 border-radius: 0
border-top-left-radius 和 border-bottom-left-radius）border-top-right-radius 和 border-bottom-right-radius）示例规则（需放在 Bootstrap 样式之后）：
.input-group .form-control:not(:first-child):not(:last-child),
.input-group .input-group-text:not(:first-child):not(:last-child) {
border-radius: 0;
}
.input-group .form-control:first-child,
.input-group .input-group-text:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.input-group .form-control:last-child,
.input-group .input-group-text:last-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}注意：如果用了自定义 class（如 .search-input），务必提高选择器权重，例如 .input-group > .search-input:first-child，否则会被 Bootstrap 默认样式压住。
立即学习“前端免费学习笔记（深入）”；
容易被忽略的兼容性陷阱
- Safari 对 flex 容器内 line-height 和图标对齐更敏感，.input-group-text 里若含图标，要加 align-items: center 防止光标偏移
- Bootstrap 4 升级到 5 后，.input-group-text 从 display: table-cell 改为 display: flex，老写法中靠 width: 1% 挤占空间的方式会失效
- 如果 input group 套在 .col 或 .form-floating 里，父容器的 overflow: hidden 可能意外裁掉边框，得检查 computed styles 里 border 是否被截断
真正起效的从来不是“加个圆角”，而是确保每个边角只由一个元素负责、且中间连接处彻底归零。
