卡片边框源自 .card 默认的 border 样式，可用 border-0 工具类快速移除；需注意 :focus/:hover 状态下的 outline 和 box-shadow，以及嵌套元素如 .list-group 的额外边框。
卡片边框来自 .card 的默认 border
Bootstrap 的 .card 组件默认带 1px solid rgba(0,0,0,.125) 边框，这是写死在 CSS 里的。直接删掉类名或覆盖样式都行，但得知道源头在哪——不是父容器、不是阴影，就是 .card 自身的 border 属性。
用 border-0 工具类最快生效
Bootstrap 5+ 内置了响应式边框工具类，border-0 是最直接的解法。它等价于 border: 0 !important，能压过默认样式：
<div class="card border-0"> <div class="card-body">内容</div> </div>
- 适用于所有卡片层级（
.card、.card-header、.card-footer单独加也有效） - 如果同时用了
shadow-sm或其他阴影类，边框消失但阴影保留，视觉上依然有层次 - 注意：某些自定义主题或重写过的 Bootstrap 版本可能禁用了工具类，此时需检查
$enable-border-utilities是否为true
手动覆盖 CSS 时别漏掉 :focus 和 :hover
只改 .card { border: none; } 不够——Bootstrap 的 .card 在焦点或悬停状态（比如内含可聚焦元素）可能触发额外边框，尤其是配合 .card-link 使用时：
.card.no-border {
border: none !important;
}
.card.no-border:focus,
.card.no-border:hover {
outline: none;
box-shadow: none;
}
- 务必加
!important，否则容易被 Bootstrap 原生.card:focus规则覆盖 -
box-shadow: none很关键：有些“无边框”需求其实是要彻底扁平化，而默认的box-shadow在悬停时会增强，看起来像边框重现 - 如果卡片里有
<a></a>标签，记得额外处理a:focus的默认虚线框（outline: 0）
去掉边框后，内边距和圆角可能需要微调
边框移除本身不改变 padding 或 border-radius，但视觉上卡片会“缩进感变弱”，尤其在浅色背景上。常见补救方式：
- 加
p-3或py-4 px-3显式控制内边距，避免内容贴边 - 若想更柔和，可叠加
rounded-3（Bootstrap 5.3+）或rounded调整圆角，弥补边框消失后的硬朗感 - 深色模式下，纯白卡片去边框易与背景融合，建议搭配轻微
bg-light或bg-body-secondary提供对比
真正要小心的是嵌套场景：比如 .card > .list-group 本身也有边框，那得单独处理 .list-group-item 的 border-bottom，不能只盯着 .card。
