避免CSS边框重叠

Question

这是一个简单的问题，我甚至认为之前有人问过，但它从未得到真正的答案。

我的要求很简单，就是避免边框重叠。以下是一个示例：

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

你可以看到边框在角落处重叠。

这是一个实时例子：jsFiddle 示例

我真正想做的是让底部边框覆盖右侧和左侧的边框。有人能告诉我该怎么做吗？

- Andrés Orozco

---

边框不会重叠，它们会在一个角度相遇（如果宽度相等，则为45度）。http://jsfiddle.net/j08691/xPd3J/1/ - j08691

没关系，至少你得到了它。实际上这正是我想避免的。 - Andrés Orozco

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/

- Focus