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>

应该做的伎俩

右上边框和左边框显示在顶部边框的顶部

2 个答案: