HR有两种颜色

Question

我正在努力制作一个有两种颜色的小时，底部有一个深红色，顶部有一个橙色。附上一张图片，举例说明我正在尝试的内容。有没有办法用纯CSS做到这一点？

编辑：如果没有，有没有办法将hr设置为图像？像一个png？什么东西可以拉伸到不同的尺寸？

Answer 1

使用带有2个边框的CSS，如下所示：

hr {
     border-top: 1px solid gray;
     border-bottom: 1px solid white;
}

Example in JSFiddle

为了模仿您在图片中的内容，文字浮动在人力资源上，您可以执行类似this JSFiddle的操作。

Answer 2

另一种解决方案可能只是简单地使用CSS渐变。像这样：

hr {
    border: 0;
    height: 1px;
    background: #1e5799;
    background: linear-gradient(to right,  #1e5799 50%,#7db9e8 50%);
}

Answer 3

所以，如果我理解正确..你想要一个小时..用1px高度的蓝色和另一个1px高度的红色坐在彼此的顶部.. 你可以用纯CSS来做这个，使用伪类。

hr{
position:relative;
height:1px;
background-color:red;
}
hr:before {
position:absolute;
content : ' ';
left:0;
right:0;
height:1px;
top:-1px;
background-color:blue;
}

Answer 4

您不需要hr使用Pseudo-elements这样的单个元素（ Div ）：

:root {
    background-color: red;
    text-align: center
}
:root:hover {
    background-color: orange;
}
div {
    position: relative;
    width: 40px;
    display: inline-block;
    font-style: italic
}

div:before, div:after{
    content: '';
    position: absolute;
    width: 100px;
    height: 1px;
    background: black;
    top: 50%;
    border-radius: 4px;
    box-shadow: 0 1px 1px white;
}
div:before{
    left: -100px;
}
div:after{
    right: -100px;
}

<div>or</div>