渐变button

之前想用element ui的框架实现弧形边框和字都渐变的button，发现总是会存在问题，因此只能另辟蹊径。

弧形边框和字都渐变的button

<div class="border">
  <div class="content">
    全部
  </div>
</div>

.border {
    
    
  display: inline-block;
  border-radius: 16px;
  margin: 0 10px;
  padding: 2px;
  // 重点
  background-image: linear-gradient(#3b3c45, #3b3c45),
    linear-gradient(to right, #07beed, #03db4b);
  background-clip: content-box, padding-box;
  &:hover {
    
    
    cursor: pointer;
  }
  .content {
    
    
    padding: 0px 13px;
    font-size: 12px;
    // 重点
    background-image: -webkit-gradient(
      linear,
      left top,
      right top,
      from(#07beed),
      to(#03db4b)
    );
    background-image: linear-gradient(to right, #07beed, #03db4b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

边框和字渐变的button

<div class="border">
  <div class="content">
  全部
  </div>
</div>

.border {
    
    
  padding-top: 28px;
  display: flex;
  flex-wrap: wrap;
  .content {
    
    
    width: 100px;
    height: 36px;
    margin: 30px 0 0 20px;
    text-align: center;
    line-height: 36px;
     border: 3px solid #ddd;
    background-image: linear-gradient(90deg, #07beed, #03db4b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    border-image: linear-gradient(90deg, #07beed, #03db4b) 20 20;
  }
}