css 渐变色边框

效果图：

代码：

<style>
    :root{--br-radius: 12px;}
    .list{position: relative;}
    .list_tle{margin-top: 15px;margin-bottom: 5px;}
    .item{position: relative;display: inline-flex;} 
    .br1 {padding: 10px 16px;clip-path: inset(0 round 6px);border: 4px solid;border-image: linear-gradient(to right, #FF2222,#321192,#09B0E5,#0DDE61) 1; border-radius: var(--br-radius);}
    .br2 {padding: 4px;background: linear-gradient(to right, #FF2222,#321192,#09B0E5,#0DDE61);border-radius: var(--br-radius); }
    .br_content {padding: 10px 16px;color: #000;background-color: #fff;border-radius: var(--br-radius); }
    .br_clip {position: relative; border: 4px solid transparent; background-clip: padding-box; }
    .br3_bg {position: absolute;top: 0;right: 0;left: 0;bottom: 0;z-index: -1; margin: -4px;border-radius: inherit; background: linear-gradient(to right, #FF2222,#321192,#09B0E5,#0DDE61);}
    .br4::before {content: '';
        position: absolute;top: 0;right: 0;left: 0;bottom: 0;z-index: -1;margin: -4px; border-radius: inherit;background: linear-gradient(to right, #FF2222,#321192,#09B0E5,#0DDE61);
    }
    .br5 {
        color: #000;
        padding: 10px 16px;
        border-radius: var(--br-radius);
        border: 4px solid transparent;
        background-clip: padding-box, border-box;
        background-origin: padding-box, border-box;
        background-image: linear-gradient(to right, #fff, #fff), linear-gradient(to right, #FF2222,#321192,#09B0E5,#0DDE61);
        animation: change_anima 3s linear infinite;
    }
    .br6 {
        padding: 10px 16px;
        border-radius: var(--br-radius);
        border: 4px solid transparent;
        background-clip: padding-box, border-box;
        background-origin: padding-box, border-box;
        background-image: linear-gradient(to right, #fff, #fff),linear-gradient(-45deg, #FF2222 5%, #321192 20%, #09B0E5 30%, #0DDE61 50%, #09B0E5 70%, #321192 80%, #FF2222 95%);
        background-size: 200% 100%;
        cursor: pointer;
        transition: background-position .5s ease;
    }
    .br6_inner {
        background-image: linear-gradient(-45deg, #FF2222 5%, #321192 20%, #09B0E5 30%, #0DDE61 50%, #09B0E5 70%, #321192 80%, #FF2222 95%);
        background-size: 200% 100%;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        transition: background-position .5s ease;
    }
    .br6:hover, .br6:hover .br6_inner{background-position: 100% 0;}
    @keyframes change_anima {0% {filter: hue-rotate(0deg);} 25% {filter: hue-rotate(90deg);} 50% {filter: hue-rotate(180deg);} 75% {filter: hue-rotate(270deg);}100% {filter: hue-rotate(360deg);}} 
</style>
<div class="list">
    <div class="list_tle">1、使用 border-image（缺点border-radius不起作用，clip-path只能外部）</div>
    <div class="item">
        <div class="br1">Hello World</div>
    </div>
    <div class="list_tle">2、使用 background-image（缺点border-radius不对称）</div>
    <div class="item">
        <div class="br2">
            <div class="br_content">Hello World</div>
        </div>
    </div>
    <div class="list_tle">3、使用 background-image、background-clip</div>
    <div class="item br_clip br_content">
        <div class="br3_bg"></div>
        <div>Hello World</div>
    </div>
    <div class="list_tle">4、伪元素，方法3的简化</div>
    <div class="item">
        <div class="br4 br_clip br_content">Hello World</div>
    </div>
    <div class="list_tle">5、单层元素、background-clip、background-origin、background-image</div>
    <div class="item">
        <div class="br5">Hello World</div>
    </div>  
    <div class="list_tle">6、方法5、hover 效果</div>
    <div class="item">
        <div class="br6"> 
             <div class="br6_inner">Hello World</div>
        </div>
    </div>  
    <div class="list_tle">推荐使用方法4和方法5</div>  
</div>

具体用法，拷贝到你的html中，在浏览器上慢慢调试即可！