文字渐变色的3种实现方法

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <title>CSS3渐变字体</title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      body,
      html {
        width: 100%;
        height: 100%;
      }
      .wrapper {
        width: 80%;
        margin: 0 auto;
        margin-top: 30px;
      }
      .gradient-text {
        text-align: left;
        text-indent: 30px;
        line-height: 50px;
        font-size: 40px;
        font-weight: bolder;
        position: relative;
      }
      .gradient-text-one {
        font-weight: bold;
        background-image: -webkit-linear-gradient(bottom, red, #fd8403, yellow);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .gradient-text-two {
        font-weight: bold;
        color: red;
      }
      .gradient-text-two[data-content]::after {
        font-weight: bold;
        content: attr(data-content);
        display: block;
        position: absolute;
        color: yellow;
        left: 0;
        top: 0;
        z-index: 2;
        -webkit-mask-image: -webkit-gradient(
          linear,
          0 0,
          0 bottom,
          from(yellow),
          to(rgba(0, 0, 255, 0))
        );
      }
      .gradient-text-three {
        fill: url(#SVGID_1_);
        font-size: 40px;
        font-weight: bolder;
      }
    </style>
  </head>
  <body>
    <section class="wrapper">
      <div class="panel panel-info">
        <div class="panel-heading">
          <h3 class="panel-title">方法1. background-clip + text-fill-color</h3>
        </div>
        <div class="panel-body">
          <h3 class="gradient-text gradient-text-one">花季年华</h3>
        </div>
      </div>
      <div class="panel panel-warning">
        <div class="panel-heading">
          <h3 class="panel-title">方法2. mask-image</h3>
        </div>
        <div class="panel-body">
          <h3 class="gradient-text gradient-text-two" data-content="豆蔻年华">
            豆蔻年华
          </h3>
        </div>
      </div>
      <div class="panel panel-danger">
        <div class="panel-heading">
          <h3 class="panel-title">方法3. svg linearGradient</h3>
        </div>

        <div class="panel-body">
          <svg viewBoxs="0 0 500 300" class="svgBox">
            <defs>
              <linearGradient
                id="SVGID_1_"
                gradientUnits="userSpaceOnUse"
                x1="0"
                y1="10"
                x2="0"
                y2="50"
              >
                <stop offset="0" style="stop-color: yellow" />
                <stop offset="0.5" style="stop-color: #fd8403" />
                <stop offset="1" style="stop-color: red" />
              </linearGradient>
            </defs>
            <text
              text-anchor="middle"
              class="gradient-text-three"
              x="110px"
              y="30%"
            >
              花杨年华
            </text>
          </svg>
        </div>
      </div>
    </section>
  </body>
</html>
文字渐变色的3种实现方法

推荐阅读更多精彩内容
