怎么修复Bootstrap输入组Input Group的CSS边框断裂问题？-css教程-PHP中文网

.input-group边框“断开”是因子元素各自渲染border-radius未协同清除非连接处圆角；bootstrap 5仅首尾元素设对应圆角，中间元素需手动置零并单独补角。

怎么修复bootstrap输入组input group的css边框断裂问题？

为什么.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`）

示例规则（需放在 Bootstrap 样式之后）：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

.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 默认样式压住。