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渐变 - 支持信息

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

相关CSS:

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

2. :before伪元素和box-shadow- 支持信息

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伪元素 - 支持信息

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; }

演示

Answer 2

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

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

HTML简单地说:<hr>.

jsFiddle在这里.