直接给.card加border-radius没效果是因为缺少overflow: hidden；必须同时设置.card { border-radius: 12px; overflow: hidden; }才能裁切溢出内容，且该样式必须加在.card上而非子元素。
直接给.card加border-radius没效果？缺overflow: hidden
Bootstrap 4 的 .card 默认设了 border-radius: 0.25rem，但**不带 overflow: hidden**。所以你写 .card { border-radius: 12px; } 后，里面的 .card-img-top 或文字依然会“撑出”圆角区域，看起来像没生效。
必须同步加裁剪：
.card { border-radius: 12px; overflow: hidden; }- 这个
overflow: hidden必须加在.card上，不是.card-body或.card-img-top - 如果用了
.card-img-top，它自己也带border-radius: 0.25rem 0.25rem 0 0，和.card的圆角叠加，可能显得过厚——此时可额外重置：.card .card-img-top { border-radius: 0; }
只改顶部或底部圆角？别依赖.rounded-top类
Bootstrap 4 的 .rounded-top 是通用工具类，但它不会自动清除 .card 原有的整体圆角。结果常是“上下都圆”，和预期不符。
精准控制顶部两个角的写法：
.card-top-sharp { border-top-left-radius: 0; border-top-right-radius: 0; }- 或更明确：
.card-top-sharp { border-radius: 0 0 0.25rem 0.25rem; } - 如果卡片含
.card-img-top，记得连带处理：.card-top-sharp .card-img-top { border-radius: 0; } - 避免混用
class="card rounded-top"—— Bootstrap 4 中该类权重低，容易被.card的默认规则覆盖
想全局统一圆角？改 Sass 变量比硬覆盖更稳
如果你项目用的是 Bootstrap 4 的 Sass 源码（比如通过 npm 引入并自行编译），最干净的方式是提前覆盖变量：
- 在引入 Bootstrap 前定义：
$border-radius: 0.375rem;（或任意值） - 这个变量会影响所有用到圆角的组件：
.btn、.form-control、.card、.alert等 - 若只想改卡片，不建议动全局变量；应单独写：
.card { border-radius: $card-border-radius; }，并提前定义$card-border-radius - 仅用 CDN 加载 CSS 的话，变量无效，只能靠后加载的自定义 CSS 覆盖
自定义圆角类（如.rounded-6）和.card冲突怎么办？
你写了 .rounded-6 { border-radius: 12px; }，又加了 class="card rounded-6"，但圆角还是默认值——大概率是优先级或加载顺序问题。
- Bootstrap 4 的
.card规则权重为.card（10），而.rounded-6也是 10，谁在后面谁生效 - 确保你的自定义 CSS 文件在 Bootstrap CSS 之后加载
- 提高 specificity：用
.card.rounded-6替代单独的.rounded-6 - 单位注意：Bootstrap 4 默认用
rem，手写px可能因缩放导致响应式失效，推荐保持一致单位
overflow: hidden 这一行漏掉，再大的 border-radius 都只是画饼。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
