CSS上边框颜色渐变是CSS3提供的一种新特性，它允许我们为元素的上边框设置一个渐变的颜色效果，以增强页面的视觉表现。

下面是一个CSS上边框颜色渐变的实例：

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

首先，我们设置一个10像素宽的实线上边框；

然后，通过border-image属性设置边框为线性渐变，其中to right表示渐变方向从左到右，#f00和#00f分别表示起始和结束颜色，1表示边框线的宽度。

我们还可以为CSS上边框颜色渐变指定多个颜色和色标，示例如下：

.div {
border-top: 10px solid;
border-image: linear-gradient(to right, #f00 10%, #ff0 30%, #0f0 50%, #0ff 70%, #00f 90%) 1;
}

在这个例子中，我们将渐变区域分为5段，分别设置不同的起始颜色和色标。边框线的宽度仍然为1像素。

总之，CSS上边框颜色渐变是一种很好的实现渐变色效果的方式，它可以让页面更加生动，突出主题。