CSS 中的两个不同的水平 hr/separator

Question

一个分隔符的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）。

Answer 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 中的两个不同的水平 hr/separator

Two different horizontal hr/separator in CSS

css

colors

separator