css - 强制 border-top 与 border-left/border-right 重叠

Question

这是 fiddle :http://jsfiddle.net/3Ys2d/

CSS

div{
    border: solid 3px blue;
    border-left-color: red;
    border-right-color: red;
    width: 100px;
    height: 50px;
}

我需要让上边框在交点处完全重叠左右边框。目前，它们处于一个显示两者的一部分和交叉点的 Angular 上。

有办法吗？

Answer 1

我相信您可以通过使用 .box:before 并在 .box 中添加 position:relative; 来实现这一点.

Fiddle

CSS

.box:before{
    content:"";
    position:absolute;
    border-top:3px solid green;
    width:106px;
    left:-3px;
    top:-3px;
}