CSS实现渐变色边框，可以通过以下5种方法来实现：

1. 使用background-image和linear-gradient创建渐变边框
   使用background-image和linear-gradient来创建渐变边框，可以先为元素设置一个透明的border属性，然后为元素的背景设置渐变背景，从而实现渐变边框。

.gradient-border {
  border: 10px solid transparent;
  background-clip: padding-box;
  background-image: linear-gradient(to bottom, #3498db, #2ecc71);
}

2. 使用box-shadow和inset创建内嵌式渐变边框
   使用box-shadow和inset参数可以创建内嵌渐变边框，思路是通过box-shadow指定多层渐变边框的偏移量和颜色值。

.inset-border {
  box-shadow: inset 0 0 0 10px #3498db, inset 0 0 0 20px #2ecc71;
}

3. 使用border-image和linear-gradient创建渐变边框
   使用border-image和linear-gradient创建渐变边框可以创建多层边框，同时可以通过border-image-slice属性设置边框的透明度和宽度。

.gradient-border {
  border-style: solid;
  border-width: 10px;
  border-image: linear-gradient(to bottom, #3498db, #2ecc71) 1;
  border-image-slice: 10;
}

4. 使用多重边框创建渐变边框
   使用多重边框技术，可以创建多层不同样式的边框，包括实线、虚线和点线边框，并对这些边框透明度和颜色进行设置。

.double-border {
  border-style: double;
  border-width: 10px;
  border-color: #2ecc71 transparent #3498db transparent;
}

5. 使用波浪线图案实现渐变边框
   使用波浪线图案，可以创建具有动态效果的渐变边框，但需要注意兼容性问题。可以通过background-image和radial-gradient来实现波浪线效果。

.wavy-border {
  border: 10px solid;
  background: radial-gradient(circle at 0 0, #3498db 15%, rgba(255,255,255,0) 16%), radial-gradient(circle at 100% 0, #3498db 15%, rgba(255,255,255,0) 16%), radial-gradient(circle at 100% 100%, #3498db 15%, rgba(255,255,255,0) 16%), radial-gradient(circle at 0 100%, #3498db 15%, rgba(255,255,255,0) 16%);
  background-size: 50px 50px;
  background-position: 0 0, 50px 0, 50px 50px, 0 50px;
}

示例1:

<div class="gradient-border">
  <p>使用background-image和linear-gradient创建渐变边框</p>
</div>

示例2:

<div class="double-border">
  <p>使用多重边框创建渐变边框</p>
</div>

以上是CSS实现渐变色边框的5种方法，可以根据需要选择和应用不同的方法。

渐变色边框动画-实现效果

.circle{
    
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 50%;
    border:1px solid #fff;
    box-shadow: 0px 0px 5px #c8c8c8;
    font-size: 2.5rem;
    text-align: center;
    line-height: 5.5rem;
}
.progress-chart{
    
    position: absolute;
    z-index: 99;
}
/* 发光效果 */
.progress-circle::before{
    
        content: "";
    position: absolute;
    // top: 6px;
    // left: 0px;
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
    background: linear-gradient(0deg, #2f66ff, #fff 100%);
    /* 模糊 */
    filter: blur(1px);
}
/* 黑圆 */
.progress-circle::after{
    
    content: "";
    position: absolute;
    // top: 9px;
    // left: 3px;
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    background: rgb(24, 35, 48);
}
.progress-circle{
    
    /* 绝对定位 */
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    /* 渐变背景 */
    background: linear-gradient(0deg,
                #2f66ff,
                #fff 100%);
    /* 执行动画：动画名 时长 线性的 无限次播放 */
    animation: circleRotate 1s linear infinite;
}
/* 定义动画 */
@keyframes circleRotate {
    
    0%{
    
        transform: rotate(0deg);
    }
    100%{
    
        transform: rotate(360deg);
    }
}