使用css的不同彩色线

Question

我有一些想法做不同的彩色线

1. 将它用作图像（不好，因为我将在我的网站上使用它，它会增加http请求）

2. 在css中定义4或5个类（widht=50px,height=5px,color=somecolor）并使用html中的类。 （我可能需要使用超过20个跨度，我不想增加DOM元素的数量）

任何人都可以通过css和html告诉我一些其他的方法吗？

由于

Answer 1

您可以使用css3实现它。

将此css应用于您的div

.multicolor
{
 height:5px;
 width:100%;
 background-image: -webkit-linear-gradient( left, red, orange, yellow, green, blue,indigo,violet, indigo, blue, green, yellow, orange, red );
 background-image: -moz-linear-gradient( left, red, orange, yellow, green, blue,indigo, violet, indigo, blue, green, yellow, orange,red );
 background-image: -o-linear-gradient( left, red, orange, yellow, green, blue,indigo, violet, indigo, blue, green, yellow, orange,red );
 background-image: -ms-linear-gradient( left, red, orange, yellow, green, blue,indigo, violet, indigo, blue, green, yellow, orange,red );
 background-image: -khtml-linear-gradient( left, red, orange, yellow, green, blue,indigo, violet, indigo, blue, green, yellow, orange,red );
 background-image: linear-gradient( left, red, orange, yellow, green, blue,indigo, violet, indigo, blue, green, yellow, orange,red );
}

JSfiddle Demo

Answer 2

您可以使用：之前和之后：伪元素。 下面的示例显示了如何摆脱颜色关节处的渐变。

.line {
height: 11px;
background: #d1d2d4; 
position: relative;
&:before, &:after  {
    content: '';
    height: 11px;
    width: 50%;
    display: block;
}
&:before {
    background: linear-gradient(to right, blue 50%, green 50%);  
}
&:after {
    background: linear-gradient(to right, red 50%, violet 50%);
    position: absolute;
    top: 0;
    right: 0;  
}

}

https://codepen.io/nektobit/pen/wjOdww