必须用!important显式覆盖高频组件选择器，因bootstrap 5硬编码圆角且不读css变量；*{border-radius:0!important}会破坏第三方库、svg、弹窗及原生元素渲染，且无法触达伪元素和collapse表格。
直接写 border-radius: 0 不生效，是因为 Bootstrap 5 的多数基础组件（如 .btn、.form-control、.card）使用高 specificity 选择器硬编码了圆角值，且不读取 CSS 变量——必须用带 !important 的显式覆盖规则，且覆盖对象得是具体类名，不是通配符。
为什么 * { border-radius: 0 !important } 是错的
它会破坏所有第三方 UI 库、SVG 图标、自定义弹窗、甚至 <progress></progress> 或 <meter></meter> 的原生渲染弧度。更关键的是，Bootstrap 自身部分伪元素（如 .btn-close::before）的圆角由独立规则控制，* 根本触达不到；同时，表格（<table>）在 <code>border-collapse: collapse 下压根不支持 border-radius，强行加只会制造调试幻觉。
必须覆盖的高频组件选择器列表
以下选择器按实际权重和覆盖率验证过，适用于 CDN 引入或无 Sass 编译环境：
-
.btn, .btn-group > *, .btn-close—— 按钮及其内部结构 -
.form-control, .form-select, .input-group > *, .form-floating > .form-control—— 表单控件全链路（含 focus 状态和浮动标签） -
.card, .alert, .badge, .list-group-item, .dropdown-menu—— 常见容器与提示类 -
.toast, .modal-content, .popover, .tooltip—— 浮层类组件，它们的圆角常被忽略但实际存在
每条规则末尾都必须加 !important，否则会被 .btn-primary:focus 或 .form-control:focus 覆盖。
如何避免首尾项圆角“残留”问题
比如 .list-group 的首项和末项圆角不会被上面通用规则清干净，因为 Bootstrap 用了 :first-child 和 :last-child 独立声明。需额外补：
.list-group > .list-group-item:first-child {
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
}
.list-group > .list-group-item:last-child {
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
注意：不要只写 border-top-radius: 0，某些 RTL 场景下方向语义会反转；分方向写更可控，也兼容 dir="rtl" 页面。
表格和图片的圆角要单独处理
<table> 元素无法直接设 <code>border-radius 生效，正确做法是用容器包裹并启用 overflow: hidden：
.table-container {
border-radius: 0;
overflow: hidden;
border: 1px solid var(--bs-border-color);
}
而 <img> 的圆角受 .rounded 工具类影响，若你没主动加该类，它默认无圆角；但若项目中混用了 .img-fluid 或 .figure-img，需一并加入覆盖列表：img, .img-fluid, .figure-img。
真正麻烦的不是写多少行 CSS，而是每次升级 Bootstrap 版本后，得重新检查 DevTools 的 Computed 面板里哪些组件的 border-radius 还显示为非零数值——因为新版本可能新增了带圆角的组件（比如 v5.3.3 加入的 .offcanvas-header），而它的选择器你根本没覆盖到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
