如何修改Bootstrap深色卡片的边框颜色？

你的问题出在两个地方：一是CSS语法错误，二是没找对需要修改的边框元素。Bootstrap里card-header和card-body之间的分隔线是card-header的下边框，不是卡片整体的边框，而且你写的.card { border: color: white; }是完全错误的CSS写法，根本不会生效。

下面是几种可行的解决方法：

方法1：行内样式快速调整 #

适合单张卡片的临时修改，直接在card-header的style属性里添加下边框样式：

<div class="card" style="width: 800px; border-radius: 23px; background-color: rgb(35, 33, 33); color: white;">
    <h5 class="card-header" style="color: white; border-bottom: 1px solid white;" >Time Managing</h5>
    <div class="card-body" style="color: white" >
      <h5 class="card-title">Prioritization</h5>
      <p class="card-text">Additional content.</p>
      <a href="#" class="btn btn-primary">Learn More</a>
    </div>
</div>

方法2：自定义CSS类（推荐，复用性强） #

如果有多个深色卡片，写一个自定义类可以避免重复代码：

/* 自定义深色卡片基础样式 */
.dark-card {
    background-color: rgb(35, 33, 33) !important;
    color: white !important;
    border-radius: 23px;
    width: 800px;
}

/* 修改header的下边框颜色 */
.dark-card .card-header {
    border-bottom-color: white !important;
}

/* 可选：部分Bootstrap版本中card-body有上边框，也可以统一修改 */
.dark-card .card-body {
    border-top-color: white !important;
}

然后在HTML里直接调用这个类：

<div class="card dark-card">
    <h5 class="card-header">Time Managing</h5>
    <div class="card-body">
      <h5 class="card-title">Prioritization</h5>
      <p class="card-text">Additional content.</p>
      <a href="#" class="btn btn-primary">Learn More</a>
    </div>
</div>

方法3：利用Bootstrap内置类（注意优先级） #

Bootstrap有内置的border-white类，但默认的card-header边框样式优先级更高，需要配合!important强制生效：

<h5 class="card-header border-white" style="color: white; border-bottom-color: white !important;" >Time Managing</h5>

补充说明： #

• 你之前的错误语法：border: color: white;不符合CSS规范，正确设置边框颜色的方式是border-color: white;，或者用简写border: 1px solid white;（同时定义边框宽度、样式、颜色）。
• 只修改.card的边框没用，因为card-header的下边框是独立设置的，优先级高于卡片整体的border属性。

内容的提问来源于stack exchange，提问作者Avi Ball