css - 边框上的边框 CSS 列表

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