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

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

看到更新的小提琴.

编辑:
或者,如果您不想依赖给定的宽度和高度,如下所示:

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

我已经使它成为一个内联块,以表明它可以在动态内容大小的情况下正常工作,但是你可以使用各种宽度.

更新的小提琴.