css实现按钮圆角渐变样式

最终成果图：

背景：

最近项目数据大屏这个样式给我卡住了，起因是UI设计想要按钮边框渐圆角背景透明渐变，我查找了好多资料也在问答里提问，都没有实现初始样式。原因是如果想用渐变边框就会使用到属性border-image，这个属性有个bug就是不能和border-radius圆角一起使用。用过伪类和盒子的方法试了，如果想通过伪类或盒子去做，那么背景就不能是透明的。因此和UI设计商量了一手，改成了背景不透明的样式，我用的盒子。建议如果有我这种情况的，要么不要渐变边框不要圆角，要么渐变圆角边框不要透明背景。

代码：

<div class="btn-container">
  <!--按钮组-->
  <div class="btn-group">
    <div class="btn-left" :class="activeCountNum===1?'active':''" @click="handleCount(1)">
      <div class="btn">按城市</div>
    </div>
    <div class="btn-center" :class="activeCountNum===2?'active':''" @click="handleCount(2)">
      <div class="btn">按空间</div>
    </div>
    <div class="btn-right" :class="activeCountNum===3?'active':''" @click="handleCount(3)">
      <div class="btn">按产品</div>
    </div>
  </div>
  <!--导出-->
  <div class="btn-export" @click="exportFile">
    <div class="export">导出</div>
  </div>
</div>

handleCount(value){
    
    
  this.activeCountNum=Number(value)
},

.btn-container{
    
    
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  position: relative;
  margin:10px 20px 0 20px;
  .btn-group{
    
    
    display: flex;
    flex-direction: row;
    height: 32px;
    .btn-left,.btn-center,.btn-right{
    
    
      box-sizing: border-box;
      padding: 1px;
      background-image:linear-gradient(180deg, #4DAAFA 0%, #074B98 100%);
      .btn{
    
    
        margin-right: 1px;
        color: #ffffff;
        font-size: 14px;
        line-height: 30px;
        text-align: center;
        background: linear-gradient(180deg, #11498B 0%, #082F67 100%);
        padding:0 10px;
      }
      &:hover,&:active{
    
    
        .btn{
    
    
          background:linear-gradient(0deg, #064895 0%, #1C7DCF 100%)
        }
      }
    }
    .btn-left{
    
    
       border-radius: 4px 0 0 4px;
       padding-right: 0px;
       .btn{
    
    
          border-radius: 4px 0 0 4px;
          padding: 0 14px;
       }
     }
     .btn-right{
    
    
       border-radius: 0 4px 4px 0;
       padding-left: 0px;
       .btn{
    
    
         border-radius: 0 4px 4px 0;
       }
     }
     .active{
    
    
        .btn{
    
    
          background:linear-gradient(0deg, #064895 0%, #1C7DCF 100%)
        }
      }
    }
    .btn-export{
    
    
      width: 70px;
      height: 32px;
      box-sizing: border-box;
      padding: 1px;
      border-radius: 4px;
      background-image:linear-gradient(180deg, #4DAAFA 0%, #074B98 100%);
      .export{
    
    
        width: 100%;
        height: 100%;
        color: #ffffff;
        font-size: 14px;
        line-height: 30px;
        text-align: center;
        border-radius: 4px;
        background: linear-gradient(180deg, #11498B 0%, #082F67 100%);
      }
      &:hover,&:active{
    
    
        .export{
    
    
          background:linear-gradient(0deg, #064895 0%, #1C7DCF 100%)
        }
      }
    }
  }