<p>Bootstrap 5 默认组件圆角无法通过 .rounded-0 移除，因其圆角由各组件独立 CSS 规则定义；全局移除需用 * { border-radius: 0 !important; } 或按组件精细覆盖，但需注意视觉断裂与动画兼容性问题。</p>
Bootstrap 5 默认会给很多组件加圆角（比如按钮、输入框、卡片、图像、列表项等），想全局移除，不能只靠单个 .rounded-0 类——它只对图像或带 rounded 类的元素生效，对 .btn 或 .form-control 无效。
为什么 .rounded-0 不起作用？
因为 .rounded-0 是专门针对「显式应用了圆角类」的元素设计的，比如 <img class="rounded"> 或 <div class="rounded-pill">。而 Bootstrap 内置组件（如 .btn、.form-select、.list-group-item）的圆角是写死在它们各自的 CSS 规则里的，不依赖 rounded 工具类。
常见错误现象：
- 给按钮加
class="btn rounded-0"，圆角依然存在 - 用
.list-group-flush虽能去掉列表边框和部分圆角，但首尾项仍可能残留border-radius - 覆盖
border-radius时没加!important，被 Bootstrap 的 specificity 压制
直接覆盖所有 border-radius 的 CSS 规则
最可靠的方式是重置全局 border-radius，优先级必须高于 Bootstrap 默认样式：
* {
border-radius: 0 !important;
}这个规则会命中所有元素，包括：
-
.btn、.btn-primary等按钮类 -
.form-control、.form-select、.input-group -
.card、.navbar、.dropdown-menu -
.list-group-item（即使没加.list-group-flush）
注意：如果项目中用了深色模式或主题切换，这个通配符会影响所有主题下的圆角；若只需默认主题下直角，可限定 scope，例如：
.theme-default * {
border-radius: 0 !important;
}按组件精细控制，避免过度重置
如果你只想干掉特定组件的圆角，又不想用通配符影响其他样式，推荐逐个覆盖：
- 按钮：
.btn { border-radius: 0 !important; } - 表单控件：
.form-control, .form-select, .form-check-input { border-radius: 0 !important; } - 卡片与导航栏：
.card, .navbar, .dropdown-menu { border-radius: 0 !important; } - 列表组项：
.list-group-item { border-radius: 0 !important; }（比.list-group-flush更彻底）
这种写法兼容性更好，也方便未来局部恢复某类圆角（比如只给 .card 加回 rounded-2）。
移除圆角后要注意的视觉断裂点
直角不是万能解——有些组件的圆角和阴影、内边距、图标间距是联动设计的。移除后容易出现：
- 按钮和输入框并排时，高度/对齐看起来“卡顿”
-
.input-group中的按钮与输入框接缝处露出像素级错位 -
.dropdown-menu顶部和触发按钮之间出现生硬直角衔接 - 某些第三方插件（如日期选择器）依赖 Bootstrap 圆角做过渡动画，清掉后动画失效
建议：先在局部容器（如 main 或某个 section）上验证效果，再决定是否全局应用。
