css - 边界之上的边界 CSS 列表

Question

我在 css 列表(<ul>、<li>)中遇到边缘问题。当我设置左边缘颜色和不同厚度时，重叠的下边缘结束的问题如下图所示:

在图片中可以看到右边，所以在这里我把 fiddle 留给任何可以在这种情况下帮助我的人。

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

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

你可以用 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;
}