直接给.card加border-radius没效果是因为缺少overflow: hidden，必须同时设置.card { border-radius: 12px; overflow: hidden; }才能裁切溢出内容。
直接给.card加border-radius没效果？缺overflow: hidden
Bootstrap 5 的 .card 默认只设了 border-radius，但**不带 overflow: hidden**，所以即使你写了 .card { border-radius: 12px; }，里面的图片、按钮或文字仍会“溢出”圆角区域，看起来像没生效。这不是 CSS 写错了，是裁剪逻辑缺失。
必须同步设置：
.card { border-radius: 12px; overflow: hidden; }- 如果卡片用了
.card-img-top或.card-img-bottom，这个overflow: hidden必须加在.card上，而不是子元素 - 避免加在
.card-body或其他内部容器上——它只裁自己，不影响顶部图
用CSS变量改全局圆角时，.card是否响应？
Bootstrap 5.3+ 中，.card 的圆角由 CSS 变量 --bs-border-radius 控制，但前提是你的项目加载的是支持该变量的构建版本（如官方 npm 包或 v5.3+ 编译输出）。CDN 引入的旧版 CSS（比如 v5.2.3）可能仍硬编码数值，:root 覆盖无效。
验证方式：打开浏览器开发者工具，检查 .card 计算后的 border-radius 值，看是否为 var(--bs-border-radius)。
安全写法（兼容所有版本）：
- 加
:root覆盖：:root { --bs-border-radius: 12px; }（仅对 v5.3+ 有效） - fallback 直接覆盖：
.card { border-radius: 12px !important; } - 别只改
:root就以为万事大吉——某些组件（如.dropdown-menu）可能未接入该变量
想让卡片只有顶部圆角？别只靠rounded-top类
.rounded-top 类确实能设上边两个角，但它**不会自动禁用下边圆角**——如果 .card 本身已有默认 border-radius（比如来自 $border-radius 变量），那底部依然有弧度，结果是“上下都圆”，和预期不符。
正确做法是显式重置：
-
.card-top-rounded { border-radius: 12px 12px 0 0; }（推荐，精准控制） - 或清除继承：
.card-top-rounded { border-radius: 0; } .card-top-rounded { border-top-left-radius: 12px; border-top-right-radius: 12px; } - 避免混用：
class="card rounded-top"在 Bootstrap 5 中可能被变量值覆盖，行为不稳定
自定义圆角类（如.rounded-6）和.card冲突怎么办？
你写了 .rounded-6 { border-radius: 12px; }，又给卡片加了 class="card rounded-6"，但发现圆角还是默认值——大概率是加载顺序或优先级问题。
关键点：
- 确保你的自定义 CSS 文件在
bootstrap.css之后加载 -
.rounded-6的选择器权重和.card相同，谁在后面谁生效；若.card规则里用了!important（某些定制主题会），你的类就失效 - 最稳方案：
.card.rounded-6 { border-radius: 12px !important; }，明确限定作用域 - 别用
* { border-radius: 12px; }—— 会污染第三方弹窗、图表库等非 Bootstrap 元素
复杂点在于：圆角不是孤立视觉属性，它和 overflow、box-sizing、图片的 object-fit 以及父容器布局强耦合。改一个地方前，先看它实际渲染在哪个盒模型层级上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
