直接覆盖 .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;"> <h3>使用 Bootstrap 自带的 <code>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使用以确保可读性
- 必须同时添加
