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-shadow属性：

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

边框底部显示在边框下方

1 个答案: