避免边界重叠CSS [英] Avoid Border Overlap CSS

问题描述

这是一个简单的问题，我甚至认为有人问这个问题，但它从来没有得到真正的答案。

This is a simple question, I even think someone asked this before, but It never got a real answer.

我想要的是避免边界重叠，那简单。这里有一个例子：

What I want is to avoid border overlapping, It's that simple. Here's an example:

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

您可以看到边角在边角重叠。

You can see that the borders overlap in the corner.

以下是即时示例： jsFiddle示例

我真正想做的是让底部边框覆盖左右边框。

What I really want to do is to make the bottom border cover the right and left border. Can someone tell me what can I do here?

推荐答案

你可以在你的div上覆盖一个伪元素：

You can overlay a pseudo element over your 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！