rounded类未生效主因是父容器overflow: hidden裁剪、img-thumbnail冲突或自定义css覆盖；其数值类对应0/0.25rem/0.5rem/1rem圆角，方向类可精准控制单角，但不兼容rounded-circle等形状类。
rounded类为什么没生效？先查这三处干扰
加了 rounded 却还是直角，大概率不是类名写错，而是被其他样式压制或结构限制。常见干扰源有：父容器设了 overflow: hidden 且图片带负外边距，圆角会被裁掉；误用了 img-thumbnail，它自带固定 padding 和 border，会和 rounded 叠加出视觉冲突；自定义 CSS 里写了 border-radius: 0 !important 或重置了 img 的 display（比如设成 block 却没处理基线对齐），也会覆盖工具类。
rounded-0 到 rounded-3 各级数值的实际效果
Bootstrap 5 的 rounded 系列是预设数值类，不是百分比或像素值，直接对应 Sass 变量 $border-radius 的衍生值：
-
rounded-0→border-radius: 0（完全直角） -
rounded-1→border-radius: 0.25rem（约 4px） -
rounded-2→border-radius: 0.5rem（约 8px） -
rounded-3→border-radius: 1rem（约 16px） -
rounded（无后缀）→ 等同于rounded-2
这些值在移动端和桌面端一致，不响应式。如果需要小屏圆角小、大屏圆角大，得手动加媒体查询或用断点类组合（如 rounded-md-3 rounded-lg-4 需自行定义）。
只圆某几个角？用方向类更精准
想只圆左上、右下或仅顶部？rounded-top、rounded-end、rounded-bottom、rounded-start 这四个方向类比全量 rounded 更可控：
-
rounded-top→ 仅影响border-top-left-radius和border-top-right-radius -
rounded-end→ 在 LTR 模式下等价于rounded-right，RTL 下自动转为rounded-left - 可叠加使用，比如
rounded-top rounded-end就只圆右上角 - 注意：方向类不能和
rounded-circle或rounded-pill共存——后者是整体形状控制，优先级更高，会覆盖方向类
和 img-fluid、img-thumbnail 混用要注意什么？
img-fluid 和 rounded 完全兼容，因为前者只设 max-width: 100% 和 height: auto，不影响圆角渲染。但和 img-thumbnail 一起用就得小心：
-
img-thumbnail自带padding: 0.25rem和border: 1px solid #dee2e6，再加rounded会让圆角出现在边框外侧，视觉上像“边框+圆角”双层效果 - 如果只想保留圆角、不要缩略图的 padding 和灰边，直接用
rounded+border类替代，比如rounded border border-primary - 别在同一个
<img>上同时写rounded-circle和img-thumbnail——前者强制裁圆，后者加 padding，结果是圆图带白边，比例易崩
真正容易被忽略的是：所有 rounded-* 类都依赖父容器未设 overflow: hidden。一旦父元素加了这个声明，哪怕只设一个角的圆角，超出部分也会被裁掉，看着就像没生效。检查时优先看 computed 样式里的 border-radius 是否被计算出来，再往上查父级 overflow 状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
