css实现文字和边框同样的渐变色效果

话不多说，直接上代码

实现的效果

<div className="button">
  <div className="box">
     <div className="title">
       渐变色文字
     </div>
   </div>
</div>

.button {
   	border-radius: 20px;
    background-image: linear-gradient(105deg, #3A82FD 0%, #15C6FF 100%);
    padding: 1px;
    display: inline-block;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
  .box{
    height: 100%;
    border-radius: 20px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;

    .title{
      font-size: 12px;
      line-height: 20px;
      background: linear-gradient(102deg, #1C6CF6 0%, #15E0FF 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-fill-color: transparent;
    }
  }
}