bootstrap 5中--bs-border-radius对表单控件无效，真正生效的是--bs-form-control-border-radius（v5.3.2+），而.form-control等需手动覆盖多层选择器并加!important。
Bootstrap 5 的 --bs-border-radius 对表单控件基本无效
直接在 :root 中设置 --bs-border-radius: 8px 不会影响 .form-control、.form-select 或 .form-check-input —— 因为这些组件的圆角是编译时通过 Sass 变量 $border-radius 写死的，不是运行时读取 CSS 变量。你检查 DevTools 的 Computed 面板会发现，.form-control 的 border-radius 值是 0.375rem 这样的静态数值，而非 var(--bs-border-radius)。
真正起效的 CSS 变量只有 --bs-form-control-border-radius
Bootstrap 5.3+ 在部分表单组件中引入了专用 CSS 变量，但仅限少数场景：
-
.form-control和.form-select支持--bs-form-control-border-radius（需 v5.3.2+ 官方构建版） -
.form-range使用--bs-form-range-thumb-border-radius -
.form-check-input不响应任何 CSS 变量，必须手动覆盖
安全写法（兼容性优先）：
:root {
--bs-form-control-border-radius: 6px;
--bs-form-range-thumb-border-radius: 50%;
}
⚠️ 注意：CDN 引入的旧版 Bootstrap（如 v5.2.3）不支持这些变量，此时该声明完全被忽略。
必须覆盖的多层选择器，否则点击/聚焦就变直角
.form-control 的圆角被至少 5 处规则分别控制，只改一个地方必然失效。常见现象：普通状态看着圆，一点击 :focus 就变直；用 .input-group 后左边没圆角；.form-floating 下 label 盖住顶部弧度。
实操中应一次性覆盖所有关键节点：
.form-control,
.form-control:focus,
.form-control:focus-within,
.input-group > .form-control,
.input-group > *:first-child,
.input-group > *:last-child,
.form-floating > .form-control,
.form-select,
.form-select:focus,
textarea.form-control {
border-radius: 6px !important;
}
补充要点：
-
textarea.form-control必须单独列，因 Bootstrap 对它有独立规则 -
.form-select的原生下拉箭头容器不受影响，圆角仅作用于外框 -
input[type="file"]完全不走.form-control样式，需额外加input[type="file"] { border-radius: 6px; }
为什么 rounded-0 类对表单控件完全没用
rounded-0 是工具类，只作用于显式应用了 .rounded 的元素（比如图片或自定义 div），而 .form-control 的圆角来自自身类的 border-radius 声明，并非靠工具类叠加。你写 <input class="form-control rounded-0">，rounded-0 的权重远低于 .form-control 的原始规则，根本不会生效。
真正需要的是明确的、带 !important 的属性覆盖——这不是妥协，而是对抗 Bootstrap 多层嵌套选择器的必要手段。尤其当你的自定义 CSS 文件加载顺序靠前，或项目用了第三方 UI 库时，这点更关键。
最易被忽略的一点：圆角修改后，务必检查 .form-floating 下的 label 是否仍遮挡顶部圆角。这不是圆角没生效，而是 label 的 transform 和 z-index 导致视觉错位，需配合调整 label 的 top 或 padding 才能对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
