Card顶部圆角由.card类的border-radius控制，需同时设置border-top-left-radius和border-top-right-radius为0来去除，若含.card-img-top还需额外重置其圆角。
Card顶部圆角是哪个CSS类控制的？
Bootstrap 5 的 .card 默认顶部圆角来自 .card 自身的 border-radius，不是单独的 .card-header 或伪元素。它是一个整体圆角（border-radius: 0.375rem），作用于整个卡片容器。
所以想“只去掉顶部”，不能靠删掉某个子组件的样式，得覆盖 .card 的 border-top-left-radius 和 border-top-right-radius。
最直接的写法：用内联 style 覆盖
适合单次使用、快速验证，不污染全局样式：
<div class="card" style="border-top-left-radius: 0; border-top-right-radius: 0;"> <div class="card-header">Header</div> <div class="card-body">Content</div> </div>
- 注意：必须同时设两个角，只设一个会导致不对称边框断裂
- 值用
0，别用none——border-radius不接受none - 如果用了
.card-img-top，它的圆角由自身类控制，需额外处理
更稳妥的做法：自定义 class 复用
避免重复写内联样式，推荐加一个语义化 class：
.card-flat-top {
--bs-card-border-radius: 0.375rem;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
然后在 HTML 中用：
<div class="card card-flat-top">...
- 保留
--bs-card-border-radius是为了兼容 Bootstrap 5 的 CSS 变量机制（某些主题或 JS 组件可能依赖它） - 不要用
!important—— Bootstrap 的border-radius权重不高，直接覆盖即可 - 如果项目用了 Sass，可直接在变量层改
$card-border-radius，但会影响所有卡片
遇到 Card 包含图片时的坑
如果卡片顶部有 .card-img-top，它自带 border-radius: 0.375rem 0.375rem 0 0，会和 .card 的圆角叠加出“双层圆角”效果。此时仅改 .card 不够。
- 必须同时给
.card-img-top加border-radius: 0 0 0 0 - 或者用
.card-flat-top .card-img-top { border-radius: 0; }统一控制 - 否则即使
.card顶部变直了，图片边缘还是圆的，视觉上依然突兀
真正要“去掉顶部圆角”，得看清楚圆角到底来自哪一层 —— 卡片容器、头部、还是图片。漏掉任意一层，都会白调。
