css - CSS中两个不同的水平小时/分隔符

标签 css colors separator

<分区>


关闭 7 年前

分隔符的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)。

最佳答案

你可以这样做:

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 - CSS中两个不同的水平小时/分隔符,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31393495/

上一篇:html - 动态地将图像放置在彼此旁边/之上

下一篇:javascript - :Skrollr not working on Chrome

相关文章:

javascript - 在一个单词动画时移动文本

java - 带有颜色的可绘制状态(不是可绘制对象)

javascript - 使用正则表达式从字符串数量中删除千位分隔符的最佳方法

html - 在 bootstrap 列中将六边形居中。文本中心和边距 : 0 auto; doesn't seems to work

javascript - 没有滚动条并排显示图像

css - z-index 不适用于固定位置

java - 在Android中处理ALPHA_8位图并显示在ImageView中

java - 如何将十六进制颜色代码分配给java类文件中的任何数据类型

url - URL路径的大小写和间距的最佳做法是什么?

python - 双循环中增加服务器数量,每 5 个服务器带有分隔符