bootstrap 5 用语义化类如 rounded、rounded-pill、rounded-circle 控制圆角，依赖 $border-radius 变量（默认 0.25rem），需确保元素有尺寸或 display 设置；rounded-0 显式设为直角，自定义圆角应改 sass 变量或直接写 border-radius，避免混用类与内联样式。
Bootstrap 5 默认用 rounded 类控制圆角
Bootstrap 5 移除了旧版的 rounded-0～rounded-3 数值分级，改用语义化命名：比如 rounded（默认圆角）、rounded-pill（胶囊形）、rounded-circle（正圆）。实际渲染效果取决于 $border-radius Sass 变量，默认值是 0.25rem（即 4px），所以 rounded 不是“完全无角”，而是带轻微弧度。
常见误操作是以为加了 rounded 就一定看到明显圆角——其实它只作用于块级元素或设置了 display 的内联元素；如果目标元素是纯文本或未设宽高的 span，可能根本看不出变化。
- 确保目标元素有明确尺寸或
display: inline-block/block - 若需更小/更大圆角，直接覆盖 CSS：
.my-card { border-radius: 2px; }，别依赖类名堆砌 -
rounded-0仍可用，但它是“重置为直角”，不是“移除圆角”——它显式设border-radius: 0
需要自定义圆角大小？改 Sass 变量或写内联样式
Bootstrap 的圆角大小由 Sass 变量 $border-radius、$border-radius-sm、$border-radius-lg 控制。如果你用的是编译流程（如 Webpack + Sass），在自定义主题文件里改这些变量，所有 rounded 类会同步响应。但若只用 CDN 引入 CSS，就只能手动覆盖：
.custom-rounded {
border-radius: 8px;
}
注意：不要用 !important 去强行覆盖 rounded-pill，因为它的 border-radius: 50rem 已经极大，再加大数值无意义；真要超大圆角，直接写具体像素值更可控。
- 避免混用
rounded-pill和自定义border-radius—— 后者会被前者声明覆盖 - 移动端需留意
border-radius过大会导致裁剪异常（尤其配合overflow: hidden时） - 若组件本身带内边距（如
card），圆角生效区域是整个盒模型边界，不是内容区
图片、按钮、卡片各自有专用圆角类，别硬套通用类
Bootstrap 对不同组件做了针对性优化：img 推荐用 rounded-0～rounded-3（保留旧数值类），btn 支持 rounded-pill 做椭圆按钮，card 则建议用 rounded 或 rounded-0。强行给 img 加 rounded-pill 可能造成上下圆角不一致（因图片宽高比非 1:1）。
-
<img src="..." class="rounded">安全，兼容性好 -
<button class="btn rounded-pill">Click</button>是标准写法，别写成btn rounded - 卡片头部/底部单独圆角？用
rounded-top或rounded-bottom，不是靠overflow: hidden遮罩
IE11 或老安卓 WebView 下圆角失效？检查前缀和渲染模式
Bootstrap 5 官方已放弃 IE 支持，但部分企业项目仍需兼容。此时 border-radius 在 IE11 中基本可用，但若页面触发了怪异模式（Quirks Mode），或父容器用了 transform、filter，会导致圆角被裁切。老安卓 WebView（如 Android 4.4）则可能完全忽略 border-radius，除非加 -webkit-border-radius。
- 确认文档声明为
，禁用怪异模式 - 避免在圆角容器上同时使用
transform: scale()或backface-visibility: hidden - 真要兼容 Android 4.x，补一行：
.compat-rounded { -webkit-border-radius: 4px; }
border-radius 就没地方画。
