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中，在浏览器上慢慢调试即可！