card-img-top 和 card-body 之间的边框

Question

我想在 bootstrap 卡片中的图像和卡片主体之间添加边框。我有一个 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 :

Note: None of the OTHER CSS border properties described below will have ANY effect unless the border-style property is set!

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

.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;
}

card-img-top 和 card-body 之间的边框

Border between card-img-top and card-body

css

border

twitter-bootstrap

bootstrap-4