CSS一条有2种不同颜色的直线水平线

Question

现在是 2013 年，我只是想知道是否有更好的方法来实现这一目标？有没有办法只用一个元素来做到这一点？

div.linetop { border-top: 1px solid #111111; }
div.linebottom { border-top: 1px solid #292929; }

// make a line
<div class="linetop"></div>
<div class="linebottom"></div>

编辑

这就是 HR 发生的情况，第一个像素是灰色的:/(我使用的是 chrome，顺便说一句，没有任何其他浏览器):

都试过了:

hr {
border-top: 1px solid #111111; 
border-bottom: 1px solid #292929; 
}

和

hr {
display: block;
height: 0;
padding: 0;
border-top: 1px solid #111111; 
border-bottom: 1px solid #292929; 
}

编辑

解决了!简单地添加 border:none 之前

hr {
border: none;
border-top: 1px solid #111111; 
border-bottom: 1px solid #292929; 
}

Answer 1

您可以使用 <hr>标记，并同时使用 border-top和 border-bottom :

hr {
  border-top: 1px solid #111111; 
  border-bottom: 1px solid #292929; 
}

HTML 很简单:<hr> .

jsFiddle here.