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

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内文字以外的区域裁剪掉, 所以就剩文字区域了, 然后文字再设置成透明的。