Border bottom to Display Under Side Borders

Question

好的，为了便于讨论，我有一个左右边框为灰色的框，底部有8个像素的边框，颜色不同。

边框的显示方式显示左边框和右边框内的底部边框。我做了一些研究，但我找不到一种可能的方式，使底部边界显示在侧边界下方，而不是内部边界。很抱歉，如果我没有很好地解释这一点，请随时询问您是否需要更多信息。请按照下面的链接到我创建的一个快速小提琴。

<div class="bg">
       <div class="box">
           Box
    </div>
</div>
.bg {
    background-color: #fff;
    width: 72%;
    float: left;
    height: 100%;
    padding: 100px;
}
.box {
     background-color: #fff;
    height: 200px;
    width: 200px;
    float: left;
    margin-left: 100px;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 8px solid black;
}

http://jsfiddle.net/L06s4k50/

提前感谢各位。

Answer 1

我认为实现这一点的最佳方法是完全放弃border-bottom，而是使用box-shape属性：

.box {
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    box-shadow: 0px 8px black;
}