css border 同时设置圆角和渐变色失效

前提：蓝湖图按钮边框需要做渐变色，同时设置了圆角，和渐变色确不起作用.

设置边框渐变色代码：

    .box {
        width: 200px;
        height: 200px;
        border: 5px solid;
        border-image: linear-gradient(to right, red, blue);
        border-image-slice: 1;
    }

样式展示为

即使设置border-raduis也不会生效

所以需要两层结构 给最外层设置border-radius

       <div class="box">
           <div class="text"></div>
       </div>

.box {
  border-radius: 10px;
  background-image: linear-gradient(270deg, rgba(68, 81, 241, 1), rgba(18, 241, 175, 1));
}

.text{
    background-color:'色值'
}