bootstrap 5 的 rounded 类圆角值固定为 0.25rem（约 4px），由硬编码决定，非百分比或动态计算，且不继承 $border-radius 变量。
rounded 类的圆角值到底是多少
Bootstrap 5 的 rounded 类固定使用 border-radius: 0.25rem（约 4px），不是百分比，也不是动态计算值。它由 Sass 变量 $border-radius 控制，但 rounded 本身不继承该变量——它硬编码为 0.25rem；真正继承 $border-radius 的是 .form-control、.btn、.card 这类组件级样式。
常见误解是以为 rounded 和表单输入框圆角一致（默认 0.375rem），其实不然。如果你需要统一圆角，不能只靠工具类，得改变量或覆盖全局组件样式。
-
rounded-0→border-radius: 0 -
rounded-1→0.25rem（和rounded相同） -
rounded-2→0.5rem -
rounded-3→0.75rem -
rounded-circle→50%（仅当宽高相等时才真圆）
为什么加了 rounded 没效果
最常被忽略的是 CSS 优先级和容器限制，不是类名写错。
- 父容器有
overflow: hidden（比如.card或自定义 wrapper），大圆角会被直接裁掉 - 图片用了
img-fluid但没配d-block，导致行内对齐产生底部空白缝，视觉上像“圆角没生效” - 其他样式覆盖了
border-radius，比如第三方 UI 库、重置 CSS 或内联style="border-radius: 0" - 用开发者工具检查元素，看
border-radius是否被划掉；临时加!important验证是否是优先级问题（上线前必须换更具体选择器）
border 类和 rounded 类能不能混用
能，但要注意边框颜色、宽度和圆角的协同表现。
-
border默认是1px solid #dee2e6，和rounded组合没问题 -
border-primary等语义类会覆盖边框色，但不改宽度或样式（虚线/点线需额外加border-dashed，仅 Bootstrap 5.3+ 支持） -
border-0和rounded同时用，圆角仍生效——边框移除不影响圆角渲染 - 如果边框宽度较大（如手动加
border-2或自定义border-width: 3px），圆角半径小于边框宽度时，视觉上会“塌角”（corner clipping），此时应同步增大rounded级别，例如border-2 rounded-3
响应式圆角和单角控制的现实限制
Bootstrap 原生不支持响应式圆角（如 “小屏 rounded-1，大屏 rounded-3”）或单角控制（如只左上圆角）。
- 断点类如
rounded-md-2不存在；想实现需手写媒体查询或用 Sass 编译时扩展 - 单角类（如
rounded-start）在 Bootstrap 5 中已存在，但它控制的是“起始端”，不是“左上角”——在 LTR 页面中等价于border-top-left-radius和border-bottom-left-radius，但 RTL 下行为翻转，注意逻辑而非方位词 - 要精确控制某一个角，只能写自定义类：
.rounded-tl-2 { border-top-left-radius: 0.5rem; }，并确保它加载顺序在 Bootstrap CSS 之后 - 移动端 Safari 对
50%渲染有锯齿，用固定值（如12px）或加transform: translateZ(0)可缓解
overflow 和图片自身的宽高比——尤其用 rounded-circle 时，非正方形图 + 无 object-fit: cover + 无尺寸约束，结果永远不对。
