CSS 實例-文字漸層色

h1 {
   background: linear-gradient(to top, #3a1c71, #d76d77, #ffaf7b);
   background: -webkit-linear-gradient(to top, #3a1c71, #d76d77, #ffaf7b);
   background-clip: text;
   -webkit-background-clip: text;
   color: transparent;
}

原理:

1. 設定漸層背景 background: linear-gradient(~~);
2. 設定背景裁切模式為文字 background-clip: text;
3. 將文字顏色指定為透明 color: transparent;