边框底部覆盖边界左侧？

Question

边框底部覆盖border-left，所以它看起来像在边界左侧歪斜。任何答案为什么border-bottom获得偏好并在左边覆盖？

HTML

<ul> 
    <li>list 1</li> 
    <li class="selected">list 1</li> 
    <li>list 1</li> 
    <li>list 1</li>  
</ul> 

CSS

ul { 
    list-style:none 
} 
li { 
    width:300px; 
    padding:10px; 
    height:50px; 
    background:#ddd; 
    border-bottom:1px solid #333; 
} 
li.selected { 
    border-left:4px solid #f00; 
} 

的jsfiddle：http://jsfiddle.net/HarishBoke/8VC2c/1/

Answer 1

在cssborders在对角线互相交叉，所以你不能做到这一点只能通过borders，请检查该quastion此... Can I have different colored left and top borders in CSS with straight join?

Answer 2

使用考虑使用另一种方法来达到这种效果0伪元素：

li.selected { 
    background:rgb(246, 246, 246); 
    position: relative; 
} 

.selected:before { 
    content: ""; 
    width: 4px; 
    height: 100%; 
    position: absolute; 
    left: 0; 
    top: 0; 
    background: #f00; 
} 

一个例子：http://jsfiddle.net/8VC2c/2/

Answer 3

该规则未被覆盖，您的问题是与背景颜色相同的1px边框不可见！

变化，例如，通过border-bottom:4px solid #66E710;

例子：http://jsfiddle.net/8VC2c/3/

希望它能帮助！