避免边框重叠CSS

前端之家收集整理的这篇文章主要介绍了避免边框重叠CSS前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
这是一个简单的问题,我甚至认为有人曾经问过这个问题,但它从来没有得到真正的答案.

我想要的是避免边界重叠,就这么简单.这是一个例子:

div{
   width: 400px;
   height: 150px;
   border: 1px solid red;
   border-bottom: 7px solid black;
}

您可以看到边框在边角重叠.

这是实例:jsFiddle Example

我真正想要做的是使底部边框覆盖右边界和左边界.
谁能告诉我我能在这做什么?

@R_404_323@

您可以在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;
}

示例:http://jsfiddle.net/vpHW5/10/

猜你在找的CSS相关文章