直接覆盖 .card 的 border-color 不生效，因 Bootstrap 5+ 默认依赖 --bs-border-color 变量（#dee2e6）且 .card 本身无显式边框；需用 !important、重设 CSS 变量、组合 border 工具类或修改 Sass 变量 $card-border-color，并注意深色模式适配。
直接覆盖 .card 的 border-color 不生效？检查是否被 .card-body 或主题变量干扰
Bootstrap 5+ 的 .card 默认边框由 border 工具类（如 border）或内置 CSS 规则控制，但实际渲染时，.card 元素本身可能没有显式设置 border，而是依赖 .card-header/.card-footer 或主题色变量。更常见的情况是：你加了 border 类，但颜色仍为灰色——因为 Bootstrap 默认用的是 var(--bs-border-color)，而这个 CSS 变量在 :root 中定义为浅灰（#dee2e6）。所以光改 .card { border-color: red; } 往往无效，除非提高选择器优先级或覆盖变量。
实操建议：
- 优先在自定义 CSS 中用
.card { border: 1px solid #0d6efd !important; }—— 简单粗暴，适合快速验证 - 更规范的做法是重设 CSS 变量：
:root { --bs-border-color: #dc3545; }这会影响所有用到该变量的组件（如.form-control、.table边框），需评估全局影响 - 若只想改某一张卡片，直接加内联样式：
<div class="card" style="border-color: #28a745;">
使用 Bootstrap 自带的 border- 颜色工具类时，为什么没反应？
Bootstrap 5 提供了 border-primary、border-success 等工具类，但它们**只对已存在边框的元素生效**。也就是说，.card 默认没有 border 样式（仅部分变体如 .card-outline-* 有），所以单独加 border-danger 不会显示边框。
正确组合方式：
- 必须同时添加
border（启用默认宽度/样式）和颜色类：class="card border border-warning" - 或用宽度工具类明确指定：
border-2 border-info（border-2表示 2px 宽） - 注意顺序：CSS 层叠中，
border工具类定义border-style和border-width，颜色类只定义border-color，缺一不可
用 Sass 编译时如何从源头修改 Card 边框色？
如果你用的是 Bootstrap 源码（Sass 版），最彻底的方式是调整 $card-border-color 变量。它位于 _variables.scss 中，控制所有 .card 的默认边框色（包括 .card-header 底边等）。
操作步骤：
- 在自定义 Sass 文件中，于导入 Bootstrap 前重定义：
$card-border-color: #198754; @import "bootstrap/scss/bootstrap";
- 注意：该变量不影响
.card-outline-*变体，那些由$primary、$secondary等主题色驱动 - 若还希望 header/footer 分割线同步变色，需额外覆盖
$card-border-width和$card-divider-bg
深色模式下边框颜色异常？别忘了 @media (prefers-color-scheme: dark)
Bootstrap 5.3+ 支持深色模式自动切换，--bs-border-color 在深色模式下会被重设为 #495057。如果你用变量方式覆盖了边框色，但没适配暗色上下文，卡片在深色模式下仍会回退到默认灰。
解决方案：
- 在媒体查询中补充深色模式规则：
@media (prefers-color-scheme: dark) { :root { --bs-border-color: #adb5bd; } } - 或者用
data-bs-theme="dark"手动控制，并针对该属性写样式：[data-bs-theme="dark"] .card { border-color: #6c757d; } - 工具类如
border-light在深色模式下可能对比度不足，建议搭配bg-dark使用以确保可读性
