边界边界CSS列表<ul> </ul>

Question

我在css列表（<ul>，<li>）中遇到边缘问题。问题是，当我设置左边缘的颜色和不同的厚度时，重叠的下边缘如下面的屏幕截图所示：

在图片中可以看到正确的，所以在这里我把小提琴留给那些可以在这种情况下给我帮助的人。

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

#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

这是正常的，边界相互到达角落。

你可以用box-shadow绘制你的线条： http://jsfiddle.net/T6KrE/32/

#contactList > li {
    font-weight: bold;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -2px  3px -2px gray;;
    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-left:10px solid green;
    border-right:1px solid #999999;
    height:55px;
}