CSS 不同的边框宽度重叠在一起

Question

我遇到了问题，因为border-top的宽度不同而导致边框重叠。以下是我的问题示例代码：http://jsfiddle.net/u7KhX/

.border{ width: 200px; height: 200px; border-top:5px solid #894b9d; border-right: 1px solid #dad9d9; border-bottom: 1px solid #dad9d9; border-left: 1px solid #dad9d9;

您可以看到，紫色部分尚未完成。

有什么想法吗？

- Raúl De Zamacona

---

但是如果紫色部分完成了，那么细灰色的部分就不会存在了！ - Mr Lister

Answer 1

你可以使用 div 的 ::after 伪元素，使顶部边框成为一个完美的矩形，并仍然保持其他边框按照你想要的方式设置。

将顶部边框放在 div 上，将其他三个边框放在伪元素上。

例如：

.border {
    width: 200px; height: 200px; border-top:5px solid #894b9d;
    padding: 0 1px 1px 1px;
    position:relative;
}
.border::after {
    display:block; content:'';
    position:absolute; top:0; left:0;
    width:200px; height:200px;
    border-color:#dad9d9; border-style:solid; border-width:0 1px 1px 1px;
}

请查看更新的Fiddle。

编辑：
或者，如果您不想依赖给定的宽度和高度，可以这样做：

.border {
    display:inline-block;
    position:relative;
    padding:.5em;
    border-top:5px solid #894b9d;
}
.border::after {
    display:block; content:'';
    position:absolute; top:0; left:0;
    width:100%; height:100%;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    border-color:#dad9d9; border-style:solid; border-width:0 1px 1px 1px;
}

我已将其设置为内联块，以展示它可以很好地处理动态内容大小，但你可以使用各种宽度。请参考更多更新的演示。

- Mr Lister

---

它只能在声明了宽度和高度的情况下工作，我的div永远不会有相同的高度或宽度，我需要它能够适用于我拥有的每个div。 :/ - Raúl De Zamacona

Answer 2

规范对此描述比较模糊，但所有浏览器都以相同的方式实现：

无论何处有2个边框相遇，总会有一个突然的对角线。

---

这已经被很好地利用了，通过使用纯CSS制作三角形和其他形状。请查看此画廊：

CSS的形状，由Chris Coyer。

- Joseph Silber