如何使用CSS3的漸層來實現文字顏色的漸層？

在最近的網頁設計中，我覺得包含漸層的設計越來越多。這次，我們將來介紹如何將CSS3的漸變應用於文本，並介紹如何將圖像填充到文本上。

在文字上加上顏色漸層

這是一種將漸層色設定為文字的背景顏色。目前支援的瀏覽器是Google Chrome，Safari，Opera。 （建議課程：CSS3影片教學）

HTML

<h1>你好，PHP中文网</h1>

HTML列出了要按原樣漸層的文字。

CSS

h1{
  color: #ACB6E5;
  background: -webkit-linear-gradient(90deg, #ACB6E5, #86FDE8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

效果如下：

#也可以透過指定漸層的角度來改變顏色的位置，使其有點粗糙的質感。

CSS

h1{
  color: #FF7C00;
  background: -webkit-linear-gradient(top, #FFB76B 0%, #FFA73D 50%, #FF7C00 51%, #FF7F04 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

效果如下：

# 用圖像填滿文字的顏色

除了將漸層色設定為背景顏色，還可以用圖片來設定字體顏色。

我們來用這張圖片為背景設定顏色

程式碼如下：

	
	


<h1>你好，PHP中文网</h1>

效果如下：

以上是如何使用CSS3的漸層來實現文字顏色的漸層？的詳細內容。更多資訊請關注PHP中文網其他相關文章！