避免边框重叠 CSS答案

【问题标题】：Avoid Border Overlap CSS避免边框重叠 CSS
【发布时间】：2013-09-16 19:57:06
【问题描述】：

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

我想要的是避免边框重叠，就这么简单。这是一个例子：

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

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

下面是实际示例：jsFiddle Example

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

【问题讨论】：

边框不重叠，它们以一定角度相交（如果宽度相等，则为 45 度）。 jsfiddle.net/j08691/xPd3J/1
没关系。至少你明白了。其实这就是我想要避免的。

标签： css border

【解决方案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/

【讨论】：