设置字体渐变

</template>
  <!-- 文字渐变 -->
  <div class="demo">
    <!-- 方案一 -->
    <span>fan</span>
    <!-- 方案二 -->
    <p data-tr="渐变色字体"></p>
  </div>
</template>
<style lang="scss" scoped>
.demo {
  span {
    background-image: -webkit-linear-gradient(top, red, green);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 36px;
  }
  p::before {
    font-size: 36px;
    content: attr(data-tr);
    color: green;
    -webkit-mask-image: -webkit-gradient(
      linear,
      0 0,
      0 bottom,
      from(red),
      to(rgba(0, 0, 255, 0))
    );
  }
}
</style>