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 演示

Answer 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