突变边框能够应用border-image，但带有圆角的突变边框单靠border-image却无奈实现，那有哪些办法能够实现圆角突变边框呢？
计划一：应用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>毛病：须要多嵌套一层父元素，并且还须要设置overflow: hidden;