直接修改 .form-control 的 border-radius 常失效，因 Bootstrap 5 将圆角逻辑分散在 .form-control、.input-group > *、:focus 等多层级，且 form-floating 和 Safari 私有样式等进一步干扰，需系统覆盖整条规则链并注意表格、图片等特殊场景。
直接改 .form-control 的 border-radius 为什么经常失效？
因为 Bootstrap 5 把圆角逻辑拆到了多个层级：表单控件本身、.input-group 子元素、甚至伪类状态（如 :focus）都各自声明了 border-radius。只覆盖 .form-control，大概率被 .input-group > *:first-child 或 .form-control:focus 覆盖。
常见现象：border-radius 在普通态看着生效，一点击输入框就变直角；或者加了 rounded-pill 却只有右边圆、左边不圆。
- 用浏览器开发者工具检查「Computed」面板，看最终生效的
border-radius来自哪条规则 - 优先覆盖整套链路：
.form-control, .form-control:focus, .input-group > .form-control, .input-group > *:first-child, .input-group > *:last-child - 如果用了
form-floating，还要额外处理.form-floating > .form-control和容器的overflow行为 - Safari 对
input[type="search"]有私有样式干预，需加-webkit-appearance: none才能真正接管圆角
.table 加 border-radius 没反应？不是 bug，是浏览器限制
表格元素（<table>、<tr>、<td>）在 border-collapse: collapse 模式下，根本无法渲染 border-radius —— 这是所有现代浏览器的统一行为，不是 Bootstrap 的问题。
强行给 .table 设 border-radius: 6px，computed 样式里能看到值，但视觉上就是没圆角。
- 正确做法：用外层容器包裹，设
border-radius+overflow: hidden+ 显式边框（否则圆角不可见） - 必须把
border-collapse改成separate，或保留collapse但手动给thead th:first-child和thead th:last-child加border-top-left-radius/border-top-right-radius - 注意
.table默认有margin-bottom: 1rem，要清掉，否则容器圆角下方会漏白 - 移动端小屏下，
th文字换行可能导致高度突变，让顶部圆角错位，建议固定line-height或用white-space: nowrap
想全局统一圆角大小，改变量还是覆盖 CSS？
取决于你是否控制构建流程。用 Sass 编译（Webpack/Vite + bootstrap/scss）时，改 $border-radius 变量最干净；只引 CDN 的 CSS，则只能靠后加载的自定义样式覆盖。
但要注意：$border-radius 控制的是 .btn、.card、.alert 等组件，.form-control 用的是独立变量 $input-border-radius（v5.3+ 仍未绑定到 CSS 变量），所以改一个变量 ≠ 全局生效。
- CDN 用户安全写法：
.form-control, .btn, .card, .input-group > *, .alert { border-radius: 6px !important; } - 别漏掉伪元素：如
.btn-close::before也需单独设border-radius -
.btn-sm/.btn-lg不继承不同圆角值，得显式写.btn-sm { border-radius: 4px !important; } - 避免用
!important覆盖rounded-pill—— 它的border-radius: 50rem已极大，再加大无意义，直接写像素值更可控
rounded-circle 图片变形？关键不在类名，在宽高比和渲染方式
rounded-circle 本质是 border-radius: 50%，它只对正方形区域生效。如果图片本身是 400×300，加了这个类，结果是椭圆，不是圆。
你以为加了类就完事了，其实浏览器只是把矩形边框“画圆”，内容没裁切、没居中、没缩放。
- 必须确保图片容器是正方形：用
class="w-100 h-100"配合父级aspect-ratio: 1/1或固定宽高 - 图片自身要用
object-fit: cover，否则拉伸糊图；仅靠width: 100%; height: 100%会失真 - 别在
<img>上直接加rounded-circle后还设max-width或margin—— 这些会破坏等比约束 - 如果父容器有
overflow: hidden但没设宽高，rounded-circle可能被裁成半圆，尤其在 flex 布局中
form-floating 和 input-group 这两类封装结构——它们不声不响地重写了圆角作用域，而且错误往往只在聚焦或响应式断点切换时才暴露。 
