CSS怀疑 - 边界左边框底部

Question

我正在开发一个界面css，并且遇到了以下问题：当我将左边框的大小设置的比其他大时，它不会与底边相重叠...我拍了一个很好的镜头，但没有看到像这样的东西......有人可以帮助我吗？跟随文件jsFiddle

在这种情况下，边缘的下边缘与左边的绿色重叠！

http://jsfiddle.net/Igaojsfiddle/T6KrE/24/

#contactList > li { 
font-weight: bold; 
color: #fff; 
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4); 
background-image: -webkit-linear-gradient(#ededed, #eff0f2); 
background-image: -moz-linear-gradient(#ededed, #eff0f2); 
background-image: -ms-linear-gradient(#ededed, #eff0f2); 
background-image: linear-gradient(#ededed, #eff0f2); 
border-bottom:1px solid #999999; 
border-left:10px solid green; 
border-right:1px solid #999999; 
height:55px; 

}

期待接受救助，拥抱。

Answer 1

你必须把边境的UI元素，而不是li元素上;）

#contactList { 
margin: 0; 
padding: 0; 
list-style-type: none; 
border-left: 10px solid green; 
-webkit-border-bottom-left-radius: 5px; 
-webkit-border-bottom-right-radius: 5px; 
-moz-border-radius-bottomleft: 5px; 
-moz-border-radius-bottomright: 5px; 
border-bottom-left-radius: 5px; 
border-bottom-right-radius: 5px; 
}