HR有两种颜色

Question

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

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

Answer 1

使用带有2个边框的CSS,如下所示:

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

JSFiddle中的示例.

并且模仿你的图片中的文字漂浮在HR上面,你可以做类似这样的JSFiddle.

Answer 2

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

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