设置 border-image渐变色后，再设置border-radius不生效，强行写渐变色border样式

不生效原因？

这是一个已知的问题，同时设置 border-image 浙变色和 border-radius 时，border-radius 会被 border-image 覆盖，导致设置无效 （是吗是吗是吗是吗是吗是吗）

实现目标样式（哦_豁）

<div class="abc">
    <div class="def">
        <div class="ghi">
            航行轨迹
        </div>
    </div>
</div>

// 最外层第一个盒子
.abc {
    width: 200px;
    height: 50px;
    background: linear-gradient(to right, #28BCED, #2062E9);
    border-radius: 50px;
    position: relative;
}
// 第2个盒子
.def {
    width: 196px;
    height: 46px;
    background: linear-gradient(to right, #45538b, #1F358D);
    border-radius: 50px;
    position: absolute;
    top: 2px;
    left: 2px;
}
// 第3个盒子
.ghi {
    width: 194px;
    height: 44px;
    background: linear-gradient(to right, #45538b, #1F358D);
    border-radius: 50px;
    border: 1px dashed #28A6E5;
    position: absolute;
    top: 1px;
    left: 1px;
    // 文字样式
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}