card-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> 

我want-

什么我Getting-

所有帮助表示赞赏，谢谢。

Answer 1

为了使用边框，边框样式是强制性的。正如你可以阅读here：

注：参见下文 有除非的边框样式属性设置任何影响其他CSS边框属性的无！

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

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