字体样式：镂空、渐变、背景

1: 镂空 text-stroke(文本描边)

text-stroke的属性语法：

• text-stroke-width：设置或检索对象中文字的描边厚度
• text-stroke-color：设置或检索对象中文字的描边颜色

说明：
复合属性。设置或检索对象中的文字的描边。
对应的脚本特性为textStroke。

 p {
    font-size: 150px;
    color: white;
    -webkit-text-stroke: 6px red;
  }

2: 渐变色文字

   p {
        font-size: 150px;
        color: white;
        -webkit-text-stroke: 6px red;
        background-color: rosybrown;
        background-image: -webkit-linear-gradient(top, red, #fd8403, yellow);
        -webkit-background-clip: text;
        color: transparent;
      }

<p>
  高
  <br>
  低
 </p>

3: 文字背景

我们把"白金之星"(jojo的奇妙冒险中的'人物')的图片作为文字的背景

div {
        font-size: 150px;
        background: url(../imgs/jojo.webp) no-repeat;
        background-size: 100%;
        background-origin: border-box;
        -webkit-background-clip: text;
        color: transparent;
      }

这里的关键点是-webkit-background-clip: text, 意思是将dom内文字以外的区域裁剪掉, 所以就剩文字区域了, 然后文字再设置成透明的。