给一个 div 添加底部边框

Question

我试图给一个 div 元素添加底部边框。

.divLast
{
   top: 0px;
   margin:0px;  
   padding: 0px 2px 2px 3px;    
   border-width: 2px;
   border-bottom-width:2px;
   border-bottom-color:White;
   width: 100%;
}

然而底部边框并没有呈现白色。有什么想法吗？

- ScG

Answer 1

你需要同时指定 border-bottom-style 属性给该 div 元素。

这样，你的代码就变成了：

.divLast 
{
   top: 0px;
   margin:0px;  
   padding: 0px 2px 2px 3px;    
   border-width: 2px;
   border-bottom-width:2px;
   border-bottom-color:White;
   border-bottom-style: solid;
   width: 100%;
}

或者你可以使用以下的简写形式来设置border-bottom

<style>
.divLast 
{
   top: 0px;
   margin:0px;  
   padding: 0px 2px 2px 3px;    
   border-width: 2px;
   border-bottom: 2px white solid;
   width: 100%;
}
</style>
<div class='divLast'>
   test element with white border bottom
</div>

这对我来说很有效

- rahul

Answer 2

这是因为您需要说明边框样式。如果没有说明，边框将不会显示：

border-bottom-style:solid;

您也可以将您的声明合并为一个，如下所示：

您还可以将您的声明合并为一个，如下所示：

border-bottom:2px solid White;

- Jamie Dixon