避免边框重叠CSS

Question

这是一个简单的问题,我甚至认为有人曾经问过这个问题,但它从来没有得到真正的答案.

我想要的是避免边界重叠,就这么简单.这是一个例子:

div{
   width: 400px;
   height: 150px;
   border: 1px solid red;
   border-bottom: 7px solid black;
}

您可以看到边框在边角重叠.

这是实例:jsFiddle示例

我真正想做的是让底部边框覆盖右边界和左边界.谁能告诉我,我能在这做什么？

Answer 1

您可以在div上覆盖一个伪元素:

div {
    background-color: gold;
    border-top: 4px solid #172e4e;
    height: 100px;
    position: relative;
    width: 100px;
}

div::after {
    content: "";
    position: absolute;
    bottom: 0; top: 0px; left: 0; right: 0;
    border-right:4px solid orange;
    border-left:4px solid orange;
}

示例:http://jsfiddle.net/vpHW5/10/