使用css的不同颜色的线答案

【问题标题】：different colored line using css使用css的不同颜色的线
【发布时间】：2018-05-22 11:29:39
【问题描述】：

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

将其用作图像（不好，因为我将在我的网站上使用它，它会增加 http 请求）
在 css 中定义 4 或 5 个类（widht=50px,height=5px,color=somecolor）并在 html 中使用这些类。（我可能需要使用20多个span，我不想增加DOM元素的数量）

谁能告诉我用 css 和 html 做不同颜色的线的其他方法？

谢谢

【问题讨论】：

我的朋友，你已经深入人心了，我会使用百分比而不是固定像素来选择跨度。另一种选择是使用画布；）
我认为图像最有意义。一个小小的 HTTP 请求没什么大不了的，特别是因为它会在第一次访问后被缓存。
看看this。如果你弄清楚它是如何工作的，你就可以制作出你正在寻找的图案。
@Prashanth 请定义“早期 IE 版本”我不建议针对 IE 7 及更低版本进行优化。
@TomSarduy 不需要。看看张贴的图片。它是重复的，所以一个 repeat-x 就可以了:)

标签： html css

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

【讨论】：

不错。但在 IE8 中不支持。

【解决方案2】：

您可以使用 :before 和 :after 伪元素。下面的示例展示了如何摆脱颜色接头处的渐变。

.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

【讨论】：