HR有两种颜色答案

【问题标题】：HR with two colorsHR有两种颜色
【发布时间】：2014-11-26 02:36:57
【问题描述】：

我正在尝试制作一个带有两种颜色的 hr，一种底部为深红色，一种顶部为橙色。附上一张图片，给出了我正在尝试的示例。有没有办法使用纯 CSS 来做到这一点？

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

【问题讨论】：

您可以使用我的答案中添加的伪元素和框阴影
你不需要使用伪元素。

【解决方案1】：

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

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

Example in JSFiddle.

要模仿图片中的内容，让文字漂浮在 HR 上方，您可以执行 this JSFiddle 之类的操作。

【讨论】：

【解决方案2】：

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

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

【讨论】：

我完全不知道你可以在这样的背景中做渐变！为你投票，好先生。

【解决方案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;
}

【讨论】：

【解决方案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;
}

&lt;div&gt;or&lt;/div&gt;

【讨论】：