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

编辑

解决了！只需添加边框：之前没有

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-topand border-bottom：

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

HTML 很简单：<hr>.

jsFiddle在这里。

Answer 3

您可以使用<hr>标签，并使用border-topandborder-bottom来定义您的两条线颜色：

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

Answer 4

你会尝试 box-shadow 吗，像这样：

HTML

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

CCS

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

请查看演示。

Answer 5

CSS

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

HTML

<hr id="hrtag"/>

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