卡片img-top和卡片身体之间的边界

Question

我希望在自举卡中的图像和卡体之间有一个边框。我有一个CSS如下 -

.card{
  border-width: 6px;
  border-color: rgb(255, 255, 255);
  border-radius: 0;
  background-color: transparent;
}

.card-body{
  border-top-width: 5px;
  border-top-color: rgb(255, 255, 255);
  border-radius: 0;
  color: rgb(255, 255, 255);
  text-align: center;
}

HTML -

<div class="col-md-4">
  <div class="card">
    <img class="card-img-top" alt="Depression" src="images/depression.jpg">
    <div class="card-body">
        <h3 class="card-title">DEPRESSION</h3>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
  </div>
</div>

我想要什么 -

我得到了什么 -

感谢所有帮助，谢谢。

Answer 1

边框样式是必须的，以便使用边框。正如您可以阅读here：

  

注意：下面描述的OTHER CSS边框属性都不会   除非设置了border-style属性，否则有任何效果！

所以你可以试试这段代码：

.card-body{
  border-top-width: 5px;
  border-top-color: rgb(255, 255, 255);
  border-top-style:solid;
  border-radius: 0;
  color: rgb(255, 255, 255);
  text-align: center;
}

或者干脆就这样做：

.card-body{
  border-top: 5px solid rgb(255, 255, 255);
  border-radius: 0;
  color: rgb(255, 255, 255);
  text-align: center;
}