直接覆盖 .form-control 的 border-radius 经常不生效，因 Bootstrap 5 将圆角分散在 .form-control、.input-group > *:first-child、.form-control:focus、.form-floating > .form-control 等多层级规则中，仅修改一处会被其他高权重规则覆盖，导致点击变直角、左右圆角不一致或 form-floating 下视觉遮挡。
直接覆盖 .form-control 的 border-radius 为什么经常不生效
因为 Bootstrap 5 的圆角不是靠工具类（如 rounded-0）驱动的，而是写死在 .form-control 规则里的 border-radius: 0.375rem；但更关键的是，这个值会被其他选择器反复覆盖：比如 .input-group > *:first-child、.form-control:focus、甚至 .form-floating > .form-control 都各自声明了 border-radius。你只改一个地方，其他状态或嵌套结构立刻“打回原形”。
常见现象包括：普通状态下看着圆角变了，一点击就变直角；或者用了 form-floating 后 label 盖住顶部，误以为圆角失效；又或者加了 input-group，只有右边圆、左边被截断。
- 用浏览器 DevTools 的「Computed」面板确认最终生效的
border-radius来自哪条规则 - 别只检查元素本身，点开
:focus、:hover等伪类状态看是否被重置 -
rounded-0类对.form-control完全无效——它只作用于显式应用了rounded的元素（如<img class="rounded">）
真正起效的 CSS 覆盖写法（含 !important 的合理用法）
必须覆盖整条规则链，而不是单点修补。以下写法在绝大多数项目中可直接复用：
.form-control,
.form-control:focus,
.input-group > .form-control,
.input-group > *:first-child,
.input-group > *:last-child,
.form-floating > .form-control {
border-radius: 0 !important;
}
注意几个实操细节：
立即学习“前端免费学习笔记（深入）”；
-
!important在这里不是偷懒，而是应对 Bootstrap 多层选择器叠加后的权重碾压（尤其当你的 CSS 文件加载顺序靠前时） - 只加在
border-radius上，不要写成整条!important规则，避免意外覆盖box-shadow或border - 如果只改某类输入框（如密码框），用属性选择器更精准：
input[type="password"].form-control { border-radius: 0 !important; } - 所有表单控件都要统一处理：
.form-select、textarea.form-control、.form-range（后者需额外设::-webkit-slider-thumb）
form-floating 和 input-group 的额外处理要点
这两个组件会引入独立的容器逻辑，导致圆角“视觉丢失”，不是 CSS 没生效，而是被遮挡或裁剪：
-
form-floating：label 是绝对定位的，会覆盖 input 顶部区域；必须同步给容器加overflow: visible，否则圆角被裁掉 —— 但更稳妥的是直接加.form-floating { overflow: visible; } -
input-group：默认会对首尾子元素做圆角修正（border-top-left-radius/border-bottom-right-radius等），若你设了统一0，反而要防止中间元素出现“错位直角”。此时应明确控制：.input-group > *:first-child { border-top-left-radius: 0; border-bottom-left-radius: 0; } -
input-group-text（如搜索图标按钮）自带圆角，需单独加：.input-group-text { border-radius: 0 !important; } - Safari 对
input[type="search"]有私有样式，必须加-webkit-appearance: none;才能真正接管圆角
移动端与 Safari 的兼容性坑（尤其 iOS 16+）
小数单位（如 0.125rem、0.25rem）在 Safari 中渲染极不稳定，有时直接忽略；这不是 bug，是 WebKit 对 sub-pixel 渲染的主动降级策略。
- 要设“极小直角”，别用
border-radius: 0.0625rem（≈1px），改用border-radius: 1px—— 明确、可靠、无歧义 - 大圆角（如
8px）在高缩放或小屏下可能裁切文字/光标，建议微调padding留出余量（例如从0.375rem 0.75rem改为0.3rem 0.7rem） - 如果用了
box-shadow（如 focus 态），检查阴影是否被圆角截断；必要时加clip-path: inset(0 0 0 0 round 0)强制重绘 - 第三方图标库（如 Bootstrap Icons）可能通过伪元素注入视觉层，掩盖真实边框形状；用 DevTools 的「Layout」面板看 box model 是否被遮挡
form-floating 容器的 overflow 行为和 input-group 子元素的 first/last 逻辑反转。 
