渐变边框可以使用border-image，但带有圆角的渐变边框单靠border-image却无法实现，那有哪些方法可以实现圆角渐变边框呢？
css实用小知识，你肯定用得上
方案一：使用border-image+clip-path实现
<style>.radius-gradient-border1{max-width: 300px;padding: 8px;border: 5px solid transparent;border-image: linear-gradient(90deg, #387EE8, #f60) 1;border-radius: 5px;margin-bottom: 20px;color: #f60;background-color: rgba(255,255,255,0.5);clip-path: inset(0 0 round 5px);}</style><div class="radius-gradient-border1"><p>border-image</p>+<p>clip-path</p>实现</div>
优点是内容背景可以透明
方案二：background-image+background-clip实现
<style>.radius-gradient-border2{max-width: 300px;padding: 0;border-radius: 5px;border: 5px solid transparent;margin-bottom: 20px;color: #f60;/* 这里需要设置两个背景，第一个背景是内容区域的白色背景，另一个是实现渐变边框的背景 */background-image: linear-gradient(#fff, #fff), linear-gradient(90deg, #387EE8, #f60);/* 设置背景图标的坐标原点为border-box区域的左上角，因为我们希望背景可以渗透到边框处，因此需要从边框处开始裁切，因此需要设置为border-box，默认为padding-box的左上*/background-origin: border-box;/* 背景裁切的时候，第一个背景需要从内容区域开始裁切，因此设置为content-box；第二个背景需要作为渐变边框，因此需要从边框处开始裁切 */background-clip: content-box, border-box;}</style><div class="radius-gradient-border2"><p> background-image </p>+ <p>background-clip</p>实现</div>
缺点：
内容背景不能半透明实现复杂不能使用padding
方案三：border-image+overflow: hidden实现
<style>.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);}</style><div class="radius-gradient-border3"><div class="inner"><p>border-image</p>+<p>overflow: hidden</p>实现</div></div>
缺点：需要多嵌套一层父元素，并且还需要设置overflow: hidden;
方案四：background-image+父div实现
<style>.radius-gradient-border4{max-width: 300px;padding: 5px;border-radius: 5px;background-image: linear-gradient(90deg, #387EE8, #f60);}.radius-gradient-border4 .inner{background-color: rgba(255,255,255,0.7);}</style><div class="radius-gradient-border4"><div class="inner"><p>background-image</p>+<p>父div</p>实现</div></div>
这个缺点和方案三一样
