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/

Answer 2

如果您想删除两侧的边框，您可以遵循@Curts 的建议

用以下内容在顶部粘贴一个 div

div {
    background:#e8e3dd;
    border-right:1px solid #e3ded8;
    border-left:1px solid #e3ded8;
    height:100px;
    width:100px;
}
.divheader {
    height:4px;
    background:#000000;
    margin: 0 -1px 0 -1px 0; /*This tells the header div to overlap the borders on left and right the negative values match those of your border widths*/
}

<div><div class="divheader"></div></div>

这应该够了吧