根源在于bootstrap将圆角逻辑分散到多个选择器：.form-control:first-child清右圆角、:last-child清左圆角、中间元素保留全圆角，导致接缝处露直角；须同步覆盖所有相关状态（如:focus、form-floating）及子元素边角规则。
输入框组（input-group）中圆角断裂的根源在哪
圆角断裂不是样式没写，而是 Bootstrap 默认把 .form-control 和 .input-group-text 的边角“各自为政”：
-
.form-control:first-child自带border-top-right-radius: 0 -
.input-group-text:last-child自带border-top-left-radius: 0 - 中间元素（比如中间的
.form-control）又默认保留全部圆角
结果就是左右两端看着圆，中间接缝处露直角，视觉上像被“切了一刀”。
必须同时覆盖 input 和 addon 的对应边角
只给 .input-group 设 border-radius 没用，子元素的默认规则会覆盖它。真正起效的是显式切断连接点：
-
.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→ 同样清右圆角 -
.input-group .input-group-text:last-child→ 同样清左圆角
这些规则要一起上，漏一个就可能在聚焦、悬停或 Safari 下复现断裂。
form-floating 或 focus 状态下圆角又变直了？
因为 .form-control:focus、.form-floating > .form-control 这些选择器也各自声明了 border-radius，且权重不低。如果你只改普通态，一点击就打回原形。
- 必须把
.form-control:focus加进覆盖列表 - 若用了
form-floating，还得额外加.form-floating > .form-control - 不要用
!important整条规则，只加在border-radius属性上，避免干扰box-shadow或border
移动端 Safari 圆角渲染异常怎么办
Safari（尤其是 iOS 16+）对小数单位（如 0.375rem）的圆角解析不稳定，有时直接忽略。这不是你代码错了，是浏览器行为。
- 改用整数像素值：
border-radius: 6px而非0.375rem - 避免
0.125rem、0.25rem这类换算值，它们在 Safari 里大概率不生效 - 如果项目必须用 rem 单位，至少确保最终计算值是整数像素（比如根字体设为 16px，用
0.375rem = 6px是安全的）
圆角合并这事，表面是调几个 CSS 值，实际得盯着每一种嵌套结构、每一种交互状态、每一个浏览器的渲染链路——稍有遗漏，就断在最不该断的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
