<p>Bootstrap 5 中 form-control 的圆角由 $border-radius 变量控制，默认 0.375rem，可通过修改变量或 CSS 覆盖（如 .form-control { border-radius: 0 !important; }）调整，且影响按钮、卡片等组件；form-control-lg/sm 不改变圆角，需手动覆盖；rounded-* 工具类可临时覆盖，但不支持单角控制。</p>
Bootstrap 5 中 form-control 的圆角由 $border-radius 变量控制
bootstrap 5 默认给所有 form-control（如 <input>、<select>）加了统一的圆角，值来自 sass 变量 $border-radius（默认 0.375rem）。它不是写死在 css 里，而是通过变量注入，所以改一处就能全局生效。
如果你用的是编译版（如自己构建 CSS），直接修改 _variables.scss 里的 $border-radius 即可；如果只引入官方 CDN 的 CSS，则只能覆盖样式。
- 改变量适用于自建构建流程，推荐用于项目长期维护
- 仅靠 CSS 覆盖时，必须提高选择器权重，例如用
.form-control加!important，或前置父容器类名 - 注意：该变量同时影响按钮、卡片、模态框等组件的圆角，不是表单专属
用 CSS 覆盖 form-control 圆角（CDN 用户最常用）
不改源码、只引了 Bootstrap 官方 CSS 的情况，得靠后加载的自定义样式来覆盖。关键点是选对选择器、设对属性、避开被重置。
常见错误是只写 border-radius: 0 却没生效——因为 Bootstrap 的 .form-control 规则带 !important 吗？不，它没有；但它的规则优先级高（类名 + 属性组合），所以简单覆盖可能被忽略。
- 安全写法：
.form-control { border-radius: 0 !important; }（明确且有效） - 更精细控制：分别设置四个角，如
border-top-left-radius: 0.5rem; - 避免污染全局：加作用域，比如
.my-form .form-control { border-radius: 0; } - 注意
input[type="file"]不走form-control样式，需单独处理
form-control-lg 和 form-control-sm 的圆角会变吗？
不会。大小类（form-control-lg、form-control-sm）只调整 padding 和 font-size，不修改 border-radius。它们复用同一套圆角值。
也就是说，无论你加不加 -lg 或 -sm，圆角尺寸都和普通 form-control 一致——除非你主动用变量或 CSS 改了基础值。
- 验证方式：检查浏览器开发者工具中，
.form-control-lg元素是否含有border-radius声明 → 它没有，继承自.form-control - 想让大号输入框圆角更大？得自己加规则，比如
.form-control-lg { border-radius: 0.5rem; } - 小号输入框同理，但注意过小的圆角（如
0.125rem）在高缩放下可能视觉不明显
用 rounded-* 工具类临时覆盖圆角
Bootstrap 提供了一组 rounded- 工具类（如 rounded-0、rounded-1、rounded-pill），它们可以直接加在 <input> 上，优先级高于 form-control 自带的圆角。
这是最轻量、无需写额外 CSS 的办法，适合个别输入框微调，但不适合批量控制。
-
<input class="form-control rounded-0">→ 完全无圆角 -
<input class="form-control rounded-pill">→ 椭圆形（高度一半为圆角） - 注意：这些类会覆盖全部四角，不能只改左上或右下
- 如果和其他组件嵌套（如
input-group），部分圆角可能被相邻元素遮挡或裁剪，需测试边界效果
input[type="date"]、input[type="number"] 在某些浏览器里的原生控件样式，或者忘了 textarea 也属于 form-control。这些地方不显眼，但用户一眼就能感觉“怎么这个框看起来不一样”。 
