css - 左右边框出现在顶部边框的顶部

Question

如您所见:http://jsfiddle.net/vpHW5/右边框和左边框出现在上边框的顶部。我该如何解决？

这是CSS代码:

div {
    background:#e8e3dd;
    border-right:1px solid #e3ded8;
    border-left:1px solid #e3ded8;
    border-top:4px solid #172e4e;
    height:100px;
    width:100px;
}

Answer 1

我支持@Curt 所说的——尽管您可以通过在 div 上覆盖绝对定位的伪元素来获得所需的行为:

div {
    background: #e8e3dd;
    border-top: 4px solid #172e4e;
    height: 100px;
    position: relative;
    width: 100px;
}

div::after {
    content: "";
    position: absolute;
    bottom: 0; top: 0px; left: 0; right: 0;
    border-right: 4px solid khaki;
    border-left: 4px solid khaki; 
}

http://jsfiddle.net/vpHW5/2/