Bootstrap 5 的圆角无法通过 CSS 变量覆盖，因其 border-radius 是 Sass 编译期硬编码值；直接写 border-radius: 0 无效是因组件选择器权重高且无 CSS 变量支持；优雅方案分两种：Sass 项目重定义变量后重新编译，CDN 项目则需用 !important 逐个覆盖高频组件。
不能靠改 CSS 变量来“覆盖”圆角——Bootstrap 5 的 border-radius 值不是运行时可变的 CSS 变量，而是编译期硬编码的数值；所谓“修改变量”，必须走 Sass 重新编译流程，否则无效。
为什么直接写 border-radius: 0 覆盖不了按钮和表单控件
因为 Bootstrap 5 中 .btn、.form-control、.dropdown-menu 等组件的圆角是写死在各自选择器里的，例如：
.btn {
border-radius: 0.25rem;
}
.form-control {
border-radius: 0.375rem;
}
这些规则 specificity 很高，普通 CSS 覆盖不加 !important 就会被压制。更关键的是：它们不读取任何 CSS 自定义属性（--bs-border-radius 之类），也没有 runtime fallback。
- 试图用
:root { --bs-border-radius: 0 }完全没用——Bootstrap 5 没采用这套 CSS 变量体系 - 在浏览器 DevTools 里手动改元素的
border-radius值能生效，但只是临时调试，无法落地为样式规则 - 用
.btn { border-radius: 0; }不加!important，大概率被.btn:focus或.btn-primary的后续规则覆盖
真正“优雅”的移除方式只有两种，且适用场景截然不同
所谓优雅，是指可维护、不污染、不破坏组件语义。它不等于“一行代码搞定”，而在于明确知道代价和边界。
- 如果你项目已接入 Sass 编译（如 Webpack + sass-loader）：
在自定义入口 SCSS 文件顶部重定义变量，再按顺序导入 Bootstrap 模块：$border-radius: 0;$border-radius-sm: 0;$border-radius-lg: 0;$border-radius-pill: 0;
然后@import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; …—— 这才是唯一能穿透所有组件层级的方案 - 如果你只用 CDN 引入 CSS（无编译环境）：
必须用带!important的类选择器逐个覆盖高频组件：.btn, .form-control, .input-group > *, .card, .alert, .list-group-item, .dropdown-menu { border-radius: 0 !important; }
别用* { border-radius: 0 !important; }，它会干掉第三方库、SVG 图标、甚至你自己的弹窗动画弧度
rounded-0 类为什么对按钮完全无效
rounded-0 是一个工具类（utility class），它的作用域仅限于「显式应用了圆角工具类的元素」，比如 <img class="rounded"> 或 <div class="rounded-2">。它不会影响 <code>.btn 这类基础组件，因为它们压根没引用这个工具类系统。
- 给按钮写
<button class="btn rounded-0"></button>，等于同时施加两条独立规则：.btn { border-radius: 0.25rem; }和.rounded-0 { border-radius: 0 !important; }—— 后者确实有!important，但 Bootstrap 5 的.btn规则权重更高（含伪类如.btn:hover），实际仍可能被覆盖失败 - 验证方法：打开 DevTools，选中按钮元素，看 Computed 面板里
border-radius的最终来源，大概率还是来自.btn或.btn-primary的原始声明 - 真正保险的做法是绕过工具类，直击组件本身：
.btn { border-radius: 0 !important; }
最常被忽略的一点：移除圆角后，.dropdown-menu 和 .toast 的阴影、内边距、箭头定位可能错位——因为它们的 spacing 和 border-radius 是联动设计的。不要假设“直角=更干净”，先在真实交互流里点开几个下拉菜单看看。
