CSS不同的边框宽度重叠 [英] CSS different border widths overlapping themselves

问题描述

由于border-top的宽度不同，我遇到了边界重叠问题。

这是我的问题的示例代码：
http://jsfiddle.net/u7KhX/

  .border {width：200px; height：200px; border-top：5px solid＃894b9d; border-right：1px solid＃dad9d9; border-bottom：1px solid＃dad9d9; border-left：1px solid＃dad9d9; 
  

可以看到紫色部分不完整。

任何想法？

解决方案

您可以使顶部边框成为一个完美的矩形，你希望使用div的 :: after 伪元素。

将顶边框放在div本身

 override>  .border {
 width：200px; height：200px; border-top：5px solid＃894b9d; 
 padding：0 1px 1px 1px; 
 position：relative; 
} 
 .border :: after {
 display：block;内容：''; 
 position：absolute; top：0; left：0; 
 width：200px; height：200px; 
 border-color：＃dad9d9; border-style：solid; border-width：0 1px 1px 1px; 
} 
  

查看更新小提琴。

编辑：

或者如果您不想依赖于给定的宽度和高度，如下所示：

  .border {
 display ：inline-block; 
 position：relative; 
 padding：.5em; 
 border-top：5px solid＃894b9d; 
} 
 .border :: after {
 display：block;内容：''; 
 position：absolute; top：0; left：0; 
 width：100％;高度：100％; 
 -webkit-box-sizing：border-box; 
 -moz-box-sizing：border-box; 
 box-sizing：border-box; 
 border-color：＃dad9d9; border-style：solid; border-width：0 1px 1px 1px; 
} 
  

我已经做了一个inline-block，具有动态内容大小，但您可以使用各种宽度。

更多更新的小提琴。

I'm having trouble with borders overlapping themselves because of the different width the border-top has.

Here is an example code of my problem: http://jsfiddle.net/u7KhX/

.border{ width: 200px; height: 200px; border-top:5px solid #894b9d; border-right: 1px solid #dad9d9; border-bottom: 1px solid #dad9d9; border-left: 1px solid #dad9d9;

As you can see the purple part is not complete.

Any Ideas?

解决方案

You can make the top border a perfect rectangle and still have the other borders the way you want them by using the div's ::after pseudo element.

Put the top border on the div itself and the other three borders on the pseudo-element.

For example:

.border {
    width: 200px; height: 200px; border-top:5px solid #894b9d;
    padding: 0 1px 1px 1px;
    position:relative;
}
.border::after {
    display:block; content:'';
    position:absolute; top:0; left:0;
    width:200px; height:200px;
    border-color:#dad9d9; border-style:solid; border-width:0 1px 1px 1px;
}

See updated fiddle.

Edit:
Or if you don't want to rely on a given width and height, like this:

.border {
    display:inline-block;
    position:relative;
    padding:.5em;
    border-top:5px solid #894b9d;
}
.border::after {
    display:block; content:'';
    position:absolute; top:0; left:0;
    width:100%; height:100%;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    border-color:#dad9d9; border-style:solid; border-width:0 1px 1px 1px;
}

I've made it an inline-block, to show that it works fine with dynamic content sizes, but you can work with all kinds of widths.

more updated fiddle.

这篇关于CSS不同的边框宽度重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！