效果圖一：
效果圖二：
以下使詳細介紹：
今天的主角是-webkit-background-clip: text;
/使用了這個屬性的意思是，以區塊內的文字作為裁剪區域向外裁剪，文字的背景即為區塊的背景，文字之外的區域都將被裁剪掉。/
background-clip 屬性規定背景的繪制區域
簡單試煉：參照w3school
（https://www.w3school.com.cn/cssref/pr_background-clip.asp）
常見的字體漸變主要有以下幾點：
/background-clip: border-box; // 背景延伸到邊框外沿（但是在邊框之下）
background-clip: padding-box; // 邊框下面沒有背景，即背景延伸到內邊距外沿。
background-clip: content-box; // 背景裁剪到內容區 (content-box) 外沿。/
/*背景由CSS linear-gradient() 函數作用
簡單試煉：參照菜鳥教程
https://www.runoob.com/cssref/func-linear-gradient.html
具體代碼如下
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 div{ 8 width:100px; 9 height:100px; 10 margin:0 auto; 11 /*使div參照頁面劇中顯示*/ 12 } 13 div p{ 14 text-align: center; 15 /*使文字參照div居中顯示*/ 16 background: linear-gradient(red, green, blue); 17 -webkit-background-clip: text; 18 /*使用了這個屬性的意思是，以區塊內的文字作為裁剪區域向外裁剪， 19 * 文字的背景即為區塊的背景，文字之外的區域都將被裁剪掉。*/ 20 color: transparent; 21 /*定義文本顏色為透明*/ 22 font-weight: bolder; 23 /*文本加粗*/ 24 font-size: 30px; 25 /*文本大小*/ 26 } 27 28 </style> 29 </head> 30 <body> 31 <div> 32 <p>奇潮屋</p> 33 </div> 34 </body> 35 </html>