4

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

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

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

有任何想法吗？

4

2 回答 2

5

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

将顶部边框放在 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;
}

我把它做成了一个内联块，以表明它适用于动态内容大小，但你可以使用各种宽度。

更多更新的小提琴。

于 2013-09-03T18:25:15.787 回答
0

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

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

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

CSS 的形状，作者：Chris Coyer。

于 2013-09-03T18:10:12.510 回答