这是一个简单的问题,我甚至认为有人曾经问过这个问题,但它从来没有得到真正的答案.
我想要的是避免边界重叠,就这么简单.这是一个例子：
div{
width: 400px;
height: 150px;
border: 1px solid red;
border-bottom: 7px solid black;
}
您可以看到边框在边角重叠.
这是实例：jsFiddle Example
我真正想要做的是使底部边框覆盖右边界和左边界.
谁能告诉我我能在这做什么？
解决方法
您可以在div上覆盖一个伪元素：
div {
background-color: gold;
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 orange;
border-left:4px solid orange;
}
