Question

由于边框顶部的宽度不同，我遇到边框重叠的问题。

以下是我的问题的示例代码： 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;

如您所见，紫色部分不完整。

任何想法？

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;
}

请参阅updated 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;
}

我已将其设为内嵌块，以表明它可以在动态内容大小下正常工作，但您可以使用各种宽度。

more updated fiddle

Answer 2

规范对此非常模糊，但所有浏览器都以相同的方式实现它：

无论2个边界相遇，总会有一条突然的对角线。

通过制作三角形和三角形，这已经得到了很好的利用。纯CSS中的其他形状。看看这个画廊：

The shapes of CSS，来自Chris Coyer。

CSS不同的边框宽度重叠自己

2 个答案: