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 btw没有任何其他浏览器）：

试过两个：

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

可能的替代解决方案：

1。 CSS渐变 - support info

HTML ：<div class='v1'></div>

相关的 CSS ：

.v1 {
  background: linear-gradient(#111 50%, #292929 50%) no-repeat 50% 75%;
  background-size: 80% 2px;
}

2。一个:before伪元素＆amp;一个box-shadow - support info

HTML ：<div class='v2'></div>

相关的 CSS ：

.v2 { position: relative; }
.v2:before {
  position: absolute;
  right: 10%; bottom: 20%; left: 10%;
  height: 1px;
  box-shadow: 0 1px #292929;
  background: #111;
  content: '';
}

3。 :before和:after伪元素 - support info

HTML ：<div class='v3'></div>

相关的 CSS ：

.v3 { position: relative; }
.v3:before, .v3:after {
  position: absolute;
  right: 10%; bottom: 20%; left: 10%;
  height: 1px;
  background: #111;
  content: '';
}
.v3:after { margin-bottom: -1px; background: #292929; }

demo

Answer 2

您可以使用<hr>代码，同时使用border-top和border-bottom：

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

HTML只是：<hr>。

jsFiddle here.

Answer 3

您可以使用<hr>代码，并使用border-top和border-bottom定义两行颜色：

hr {
  display: block;
  height: 0;
  padding: 0;
  border-top: 1px solid #08f; 
  border-bottom: 1px solid #666; 
}

Answer 4

<强> CSS

#hrtag {
border-bottom: green 2px solid;
border-top: red 2px solid;
}

<强> HTML

<hr id="hrtag"/>

如果你想让它成为一个类，那么只需交换#for。和班级的ID。在CSS中，您可以将颜色更改为您想要的颜色。这是在Chrome中测试的。

Answer 5

你会尝试使用box-shadow：

HTML

<div class="hr"></div>

CCS

.hr{
  border-top: 1px solid #111;
  box-shadow: 0 1px 0 #292929;
}

请查看demo。