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

使用before伪元素

，考虑使用另一种方法来实现此效果

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 2

borders中{p} css彼此对角相交，所以只有使用borders才能实现这一点，请检查此问题是否正确... Can I have different colored left and top borders in CSS with straight join?

Answer 3

规则未被覆盖，您的问题是没有可视化与背景颜色相同的1px边框！

例如，更改border-bottom:4px solid #66E710;

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

希望它有所帮助！

边界覆盖边界左边？

3 个答案: