background-clip:text与渐变文字效果实例页面

展示

代码

• HTML：

  <p class="text-gradient">我是渐变文字</p>

• CSS：

  .text-gradient {
      font-size: 5rem;
      color: deepskyblue;
  }
  @supports (-webkit-background-clip: text) or (background-clip: text) {
      .text-gradient {
          background: linear-gradient(deepskyblue, deeppink);
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
      }
  }