通过CSS实现渐变色边框的几种方法：

1. 使用border-image实现渐变色边框，边框圆角

.box{border-radius: 16px;border: 10px solid;border-image: linear-gradient(#8f41e9, #578aef,#ff5277)30 30;}

这种方式虽然简单但有个明显的缺陷，不支持设置border-radius ，外框想设置成圆角需要加

clip-path: inset(0 round 10px);

优点: 内容背景可以透明

2. 使用 background-image实现渐变色边框，边框圆角

.box{border: 4px solid transparent;border-radius: 16px;background-clip: padding-box, border-box;background-origin: padding-box, border-box;background-image: linear-gradient(to right, #222, #222), linear-gradient(90deg, #8F41E9, #578AEF);}

缺点：

• 内容背景不能半透明
• 实现复杂
• 不能使用padding
• 不是内圆角

3、border-image + overflow: hidden实现

.radius-gradient-border3{max-width: 300px;border-radius: 5px;margin-bottom: 20px;overflow: hidden;
}
.radius-gradient-border3 .inner{padding: 8px;border: 5px solid transparent;border-image: linear-gradient(90deg, #387EE8, #f60) 1;color: #f60;background-color: rgba(255,255,255,0.7);
}

缺点： 需要多嵌套一层父元素，并且还需要设置overflow: hidden;

4、动态边框

.box{border-radius: 16px;border: 10px solid;border-image: linear-gradient(#8f41e9, #578aef,#ff5277)30 30;animation: light 3s linear infinite;}@keyframes light {0% {filter: hue-rotate(0deg);/*色调旋转*/}20% {filter: hue-rotate(100deg);/*色调旋转*/}40% {filter: hue-rotate(200deg);/*色调旋转*/}100% {filter: hue-rotate(360deg);/*色调旋转*/}}