bootstrap 5的.input-group圆角“断开”源于子元素圆角规则不统一且缺乏接缝协调：.form-control左右均为0.375rem，而相邻.btn等仅设单侧圆角，导致内凹缺口或边框重叠；最小干预方案是精准控制:first-child（左圆角）、:last-child（右圆角）及中间元素border-radius:0，并同步覆盖:focus状态与暗色模式下的outline、box-shadow及边框表现。
为什么 Bootstrap 5 的 .input-group 圆角看起来“断开”了
Bootstrap 5 默认对 .input-group 内部的 .form-control、.btn、.dropdown-toggle 等元素分别设置了圆角（border-radius），但它们的值不统一，且没有协调处理相邻边框的融合逻辑。比如：.form-control 左右都是 0.375rem，而紧邻它的 .btn 可能只设了右侧圆角，导致视觉上出现“内凹缺口”或“双层边框重叠”，尤其在深色主题或高对比度下更明显。
覆盖默认圆角的最小干预方案
不要全局重写所有 .input-group 子元素的 border-radius，而是精准控制外侧两个元素的可见圆角，并清除内侧接缝处的干扰。关键点是：只动最左和最右的子元素，中间元素强制直角。
-
.input-group > :first-child：设border-top-left-radius和border-bottom-left-radius（保留左侧圆角） -
.input-group > :last-child：设border-top-right-radius和border-bottom-right-radius（保留右侧圆角） -
.input-group > :not(:first-child):not(:last-child)：设border-radius: 0（中间所有元素清空圆角，避免叠加） - 额外加一条：
.input-group .form-control:focus, .input-group .btn:focus，确保聚焦时圆角状态一致，不因 outline 或 box-shadow 破坏连贯性
适配不同组合类型（按钮/文字/下拉）
实际项目中 .input-group 常见三种结构：前缀按钮 + 输入框、输入框 + 后缀按钮、输入框 + 下拉按钮。每种结构的“最左/最右”元素语义不同，需用更具体的类名锚定：
- 前缀按钮场景：
.input-group-text在左 → 给它设左圆角，.form-control设右圆角，中间无其他元素，无需额外处理 - 后缀按钮场景：
.form-control在左 → 设左圆角，.btn或.dropdown-toggle在右 → 设右圆角 - 三件套（如搜索框：前缀图标 + 输入框 + 后缀按钮）→ 必须用
:first-child/:last-child，不能依赖类名，否则易错位 - 注意
.input-group-text默认无border-radius，若要它参与圆角衔接，必须显式设置，否则会露出直角“台阶”
别忽略 focus 状态和暗色模式下的表现
圆角修复后，:focus 时的 outline 或 box-shadow 可能盖住圆角边缘，或者在 @media (prefers-color-scheme: dark) 下因背景色变化让接缝重新暴露。实操建议：
- 用
outline: none+ 自定义box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25)替代原生 outline，确保阴影也遵循相同圆角路径 - 在暗色模式下测试
.input-group边框颜色是否与背景足够区分，必要时用border-color: var(--bs-border-color)而非硬编码值 - 如果用了
border: 0清除边框来“简化”，反而会让圆角失去锚点——圆角始终作用于 border 区域，没边框时圆角仍存在，但视觉不可见，容易误判修复效果
真正难的不是加圆角，是让所有状态（空、聚焦、禁用、悬停、暗色）下圆角过渡都自然无缝。多测几种组合，尤其是带 .is-invalid 或 .is-valid 的表单验证态，那些红色/绿色边框常会覆盖你辛苦调好的圆角逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
