CSS中的边线渐变是一种很常见的效果，它可以让边线略带渐变色，使元素更加美观。这个效果使用CSS的边框（border）属性来完成，其中需要使用到渐变（gradient）属性。

div {
border: 5px solid;
border-image: linear-gradient(to right, #00f, #f00);
}

上面的代码演示了如何在一个DIV元素上添加边线渐变效果。首先设置一个5像素的边框（solid），然后使用border-image属性来添加渐变。其中使用linear-gradient函数来表示渐变方向和渐变色，to right表示从左向右渐变，#00f和#f00表示的是起点和终点的颜色。

如果希望同时添加多个渐变效果，可以在上面的代码中继续添加参数，如下：

div {
border: 5px solid;
border-image: 
linear-gradient(to right, #00f, #f00), 
linear-gradient(to right, #f00, #0f0);
}

上面的代码表示添加了两个渐变效果，一个从蓝色到红色，一个从红色到绿色。

需要注意的是，边线渐变效果不是所有浏览器都支持，如果要保证兼容性，建议使用老式的border-image属性，其中需要使用图片来实现渐变效果。

div {
border-width: 5px;
-webkit-border-image: url(border.png) 30 30 repeat;
-moz-border-image: url(border.png) 30 30 repeat;
-o-border-image: url(border.png) 30 30 repeat;
border-image: url(border.png) 30 30 repeat;
}

上面的代码表示使用图片来实现边线渐变。其中，需要提供渐变效果的图片，30 30表示9宫格边框的各个部分的宽度，repeat表示重复填充。

总之，CSS中的边线渐变效果提供了一种简单而有趣的方式来美化网页元素，可以根据需要选择不同的实现方式，达到更好的显示效果。