html - 使用CSS的不同颜色的线条

Question

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

1. 将它用作图像(不太好，因为我要在我的整个网站上使用它，它会增加 http 请求)

2. 在 css 中定义 4 或 5 个类(widht=50px,height=5px,color=somecolor)并在 html 中使用这些类。 (我可能需要使用超过20个span，我不想增加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