css 實現字體三連 (鏤空、漸變、背景)

美化字體，鏤空字是個不錯的選擇。

參考：中秋佳節之際, 一起來欣賞 9 個冷門的css屬性

鏤空字

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

字體白色，描邊紅色。

漸變色鏤空文字

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

文字描邊 + 背景漸變

文字背景

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內文字以外的區域裁剪掉, 所以就剩文字區域了, 然後文字再設置成透明的。