bootstrap输入框组中input与addon的border-radius需显式协同控制：须重置中间元素圆角，并分别设置首尾元素对应边角，避免默认样式覆盖；推荐用:first-child/:last-child或:has()选择器精准定位，注意sass变量不自动传导至组合内。
input 和 addon 元素的 border-radius 如何协同生效
Bootstrap 的 .input-group 默认不会自动合并圆角，左右两端的 .input-group-text 和 input 各自渲染自己的 border-radius，导致视觉上出现“断开”或“重叠”。关键在于：**必须显式重置中间元素的圆角，并统一控制首尾**。
常见错误是只给整个 .input-group 设 border-radius，但子元素的默认样式（尤其是 input 的 border-top-right-radius: 0）会覆盖它。
- Bootstrap 5 默认对
.input-group-text:first-child设border-top-left-radius和border-bottom-left-radius - 对
.input-group-text:last-child设右侧圆角，但input自身仍带默认右圆角（若为末尾）或左圆角（若为开头） - 真正起作用的是直接操作
input和.input-group-text的具体边角，而非父容器
如何用 CSS 选择器精准控制每个角
靠伪类和兄弟选择器定位比写一堆 class 更可靠。例如让「左侧文本 addon + input」组合呈现左圆角、「input + 右侧按钮 addon」呈现右圆角，需分别切断中间连接处的圆角。
典型修复规则：
.input-group .form-control:not(:first-child):not(:last-child) {
border-radius: 0;
}
.input-group .form-control:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.input-group .form-control:last-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.input-group .input-group-text:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.input-group .input-group-text:last-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
注意：以上规则依赖于 Bootstrap 5 的 class 命名（.form-control），若用 input[type="text"] 等原生选择器，需确保 specificity 足够高，否则被框架样式覆盖。
垂直堆叠或多层嵌套时 border-radius 失效的原因
当 .input-group 被包在 .input-group-sm 或 .mb-3 等上下文里，或配合 flex-wrap: wrap 使用时，某些浏览器（尤其是 Safari）会因 flex 子项的 min-width 计算偏差，导致 border-radius 渲染错位。
- 避免对
.input-group设置width: 100%同时又设flex: 1—— 这会让内部元素尺寸计算冲突 - 如果用了
.input-group-lg，记得同步调整border-radius值（默认0.375rem，大尺寸建议用0.5rem） - IE11 完全不支持
:first-child在 flex 容器中的正确匹配，必须降级为 class 控制
使用 :has() 实现更简洁的逻辑（现代浏览器可用）
Chrome 105+、Firefox 121+ 支持 :has()，可一次性判断结构关系，比如「当 input 左侧有 addon 时，去掉 input 左圆角」：
.input-group:has(.input-group-text:first-child + .form-control) .form-control {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.input-group:has(.form-control + .input-group-text:last-child) .form-control {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
这个写法语义清晰，但上线前必须确认目标环境是否支持；不支持时 fallback 方案仍是手动加 class 或用 JS 补充判断。
最易被忽略的是：Bootstrap 的 $input-border-radius Sass 变量只影响单个 input，它不会传导到 .input-group 内部的协调逻辑中 —— 所以哪怕你改了变量，也得额外写 CSS 来对齐各子元素的圆角。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
