知识点：background-clip (opens new window)

通过 background-image: linear-gradient + background-clip: text; 实现

原理：设置背景，通过设置 background-clip: text;， 设置背景被裁剪成文字的前景色。

文字渐变色

<template>
  <div class="demo-textGradientColor">
    <span>文字渐变色</span>
  </div>
</template>

<script>
export default {
  name: 'TextGradientColor'
}
</script>

<style lang="scss">
.demo-textGradientColor {
  margin-top: 20px;
  span {
    font-size: 46px;
    line-height: 72px;
    letter-spacing: 10px;
    color: transparent;
    background-image: linear-gradient(90deg, red 0%, orange 50%, green 100%);
    background-clip: text;
    font-weight: bold;
  }
}
</style>