border-image渐变背景导致border-radius失效

border-image可以设置边框的渐变图片，border-radius可以设置边框的圆角

问题描述

使用border-image可以设置边框的渐变图片，border-radius可以设置边框的圆角，但在实际同时使用时，遇到了圆角不生效的情况

解决方法

直接通过设置两层元素，外层设置渐变背景 + 圆角 + padding，内层设置圆角 + 背景色

<div class="gradient_radius1 box out">
  <div class="in">111gradient_radius<br />两层元素</div>
</div>


.gradient_radius1 {
  &.out {
    border-radius: 10px;
    padding: 4px;
    background: linear-gradient(
      135deg,
      rgba(183, 40, 255, 1),
      rgba(40, 112, 255, 1)
    );
  }
  .in {
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 10px;
  }
}