CSS实现圆角渐变边框

渐变边框可以使用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;