Fe-interview: [css] 第37天 不使用border画出1px高的线，在不同浏览器的标准和怪异模式下都能保持效果一样

[haizhilin2013]

第37天 不使用border画出1px高的线，在不同浏览器的标准和怪异模式下都能保持效果一样

[rocky-191]

用border-image是否可以实现

[yxkhaha]

 <div style="width: 100%;height: 1px;"></div>
 <hr size="1">

[tzjoke]

我不知道不用border怎么搞，期待楼主公布答案~不过楼上的肯定不对，hr这个标签跨浏览器行为完全不同，就这么一个size属性绝对不行

[Konata9]

能想到的方法就是使用 div 的 height 进行模拟。

.border {
  width: 100%;
  height: 1px;
  background: blue;
}

<div class="border"></div>

[sajiaHLX]

既然是css那么就用css的方法啊！
.box::after{ content: ""; display: block; width: 100px; height: 1px; background-color: black; }

[blueRoach]

height: 1px; background-color: red;

[qiqingfu]

box-shadow

[hou499]

.box1 {
    height: 38px;
    width: 100%;
    box-shadow: 0 1px 0 0 #000;
}

.box2 {
    background-color: #000;
    height: 1px;
}

.box3:after{
    content: '';
    display: block;
    height: 1px;
    background-color: #000;
}

hr {
    height: 1px;
    border-width: 0;
    color: #000;
    background-color: #000;
}

<div class="box1">
    <br>
    box-shadow
</div>

<br>
height: 1px;
<div class="box2"></div>

<br>
:after{... height: 1px;}
<div class="box3"></div>

<br>
hr
<hr>

不太明白标准和怪异模式的区别以及怎样设置，这四条线在各浏览器下都是1px，IE9以下不支持box-shadow，IE8以下不支持伪元素，IE5下第二条线是为什么会变成这样子有没有大佬能解下惑...

[MrZ2019]

能想到的方法就是使用 div 的 height 进行模拟。

.border {
  width: 100%;
  height: 1px;
  background: blue;
}

<div class="border"></div>