CSS中的两个不同的水平小时/分隔符[关闭]答案

【问题标题】：Two different horizontal hr/separator in CSS [closed]CSS中的两个不同的水平小时/分隔符[关闭]
【发布时间】：2015-07-13 21:06:16
【问题描述】：

分隔符的CSS代码如下：

hr.separator {
    border: 0;height: 2px;background: #000;
    background-image: -webkit-linear-gradient(left, #AA0000, #000, #AA0000);
    background-image: -moz-linear-gradient(left, #AA0000, #000, #AA0000);
    background-image: -ms-linear-gradient(left, #AA0000, #000, #AA0000);
    background-image: -o-lineargradient(left, #AA0000, #000, #AA0000);
    width: 45%;
}

这是标记在哪里：

<hr class="separator" />

我想添加另一个不同颜色的“hr”。（左，#fff，#000，#fff）。

【问题讨论】：

是的。确切地！你能帮忙吗？
必须有一种方法可以添加另一个具有不同班级风格的小时。但我不知道该怎么做。
@TumajNuri jsfiddle.net/Manojkr/Lrwgkfey 检查一下
这不是一个“为我写”的网站。

标签： css colors separator

【解决方案1】：

你可以这样做：

hr.separator {
    border: 0;height: 2px;background: #000;
    width: 45%;
}
hr.separator.red{
    background-image: -webkit-linear-gradient(left, #AA0000, #000, #AA0000);
    background-image: -moz-linear-gradient(left, #AA0000, #000, #AA0000);
    background-image: -ms-linear-gradient(left, #AA0000, #000, #AA0000);
    background-image: -o-lineargradient(left, #AA0000, #000, #AA0000);  
}
hr.separator.blue{
    background-image: -webkit-linear-gradient(left, #0000AA, #000, #0000AA);
    background-image: -moz-linear-gradient(left, #0000AA, #000, #0000AA);
    background-image: -ms-linear-gradient(left, #0000AA, #000, #0000AA);
    background-image: -o-lineargradient(left, #0000AA, #000, #0000AA);  
}

<hr class="separator red" />
<hr class="separator blue" />

【讨论】：

很好的答案~其实我一直在思考如何添加更多。非常感谢。
欢迎您。在 CSS 世界中，总是尝试根据类名将颜色与大小和位置分开