突变边框能够应用 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;