邊框底部覆蓋邊界左側？

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/

希望它能幫助！