用border-image是否可以实现

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

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

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

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

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

height: 1px; background-color: red;

box-shadow

.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下第二条线是为什么会变成这样子有没有大佬能解下惑...

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

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

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

.line {
position: relative;
}

.line::before {
content: "";
position: absolute;
left: 0;
top: 0.5em; /* 调整这个值以控制线的位置 /
width: 100%;
height: 1px;
background-color: black; / 线的颜色 /
transform-origin: 0 0;
transform: scaleY(0.5); / 调整这个值以控制线的粗细 */
}