CSS带渐变的线，可以让你的网页更加美观，吸引人的视线。

/* 渐变线 */
.gradient-line {
height: 5px;
background: linear-gradient(to right, #f00, #0f0, #00f);
}

上面的代码中，我们使用了linear-gradient属性来创建一个水平的渐变线，从红色(#f00)过渡到绿色(#0f0)，最后到蓝色(#00f)。因为我们使用了to right的值，所以线性渐变是水平的。

如果我们希望创建一个垂直的渐变线，只需要将to right改为to bottom。

/* 垂直渐变线 */
.gradient-line {
height: 100px;
background: linear-gradient(to bottom, #f00, #0f0, #00f);
}

如果我们想要更多的颜色，可以使用逗号分隔每一个颜色：

/* 多色渐变线 */
.gradient-line {
height: 5px;
background: linear-gradient(to right, #f00, #ffa500, #ff0, #008000, #00f);
}

渐变线的方向可以有很多种不同的变化，你可以自由探索和创造，让你的网页更加丰富多彩。