使用CSS3創建文字顏色漸變(CSS3 Text Gradient)

考慮一下，如何在網頁中達到類似以下文字漸變的效果？

傳統的實現中，是用一副透明漸變的圖片覆蓋在文字上。具體實現方式可參考http://www.qianduan.net/css-gradient-text-effect.html。這種方式優點是圖片可控，所以可實現很復雜的漸變效果，但是缺點是圖片漸變色必須與背景色一致，同時損失了鼠標點擊、文字選擇等事件。

改進的方法可以使用CSS3的背景漸變-webkit-gradient，用一個背景漸變的DIV代替圖片。下面是實現效果示例，相比以上方案優點是不使用圖片，減小請求量和流量，但是對于以上缺點，仍然無法解決。

有沒有完美的解決方案呢？

以下介紹使用-webkit-mask遮罩的方案來實現文字漸變，完全避免了以上方案的不足。下面是實現的完美效果圖：

現在讓我們開始CSS3 Text Gradient之旅。

1、構建HTML內容和基本樣式：

我們使用一個H1標簽包裹一個A標簽：

1. <h1><ahref="#"mce_href="#">Jiangyujie</a></h1>

1. <h1><ahref="#"mce_href="#">Jiangyujie</a></h1>

樣式定義如下，我們使用text-shadow為文字添加陰影：

1. h1{
2. font-family:SegoeUI,Verdana,sans-serif;
3. font-size:100px;
4. line-height:100px;
5. text-shadow:-3px04px#006;
6. }
7. h1a:link,
8. h1a:visited,
9. h1a:hover,
10. h1a:active{
11. color:#d12;
12. text-decoration:none;
13. }

1. h1{
2. font-family:SegoeUI,Verdana,sans-serif;
3. font-size:100px;
4. line-height:100px;
5. text-shadow:-3px04px#006;
6. }
7. h1a:link,
8. h1a:visited,
9. h1a:hover,
10. h1a:active{
11. color:#d12;
12. text-decoration:none;
13. }

基本效果如下：

2、添加漸變效果：

我們通過CSS3的mask屬性為文字添加線性漸變。和background的漸變相比，可以理解為background是在文字后面，而mask是疊加在文字上面的。Mask可以設置為普通顏色、線性漸變、徑向漸變或者圖片。

代碼如下：

1. h1a:link,
2. h1a:visited,
3. h1a:hover,
4. h1a:active{
5. color:#d12;
6. text-decoration:none;
7. -webkit-mask-image:-webkit-gradient(linear,lefttop,leftbottom,from(rgba(0,0,0,1)),to(rgba(0,0,0,0)));
8. }

1. h1a:link,
2. h1a:visited,
3. h1a:hover,
4. h1a:active{
5. color:#d12;
6. text-decoration:none;
7. -webkit-mask-image:-webkit-gradient(linear,lefttop,leftbottom,from(rgba(0,0,0,1)),to(rgba(0,0,0,0)));
8. }

效果如下所示：

3、漸變為另外一種顏色：

因為-webkit-gradient實際上是按照圖片的方式進行處理的，所以我們不能通過設置文字顏色為漸變來實現文字顏色漸變為另外一種顏色的效果（不信的話你可以試試）。

所以我們要構造一個偽元素，內容和我們的文本一樣，使用偽元素的原因是避免再添加一個同樣內容的標簽造成代碼冗余：

1. h1:after{
2. content:"Jiangyujie";
3. color:#000;
4. text-shadow:3px3px1px#600;
5. }

1. h1:after{
2. content:"Jiangyujie";
3. color:#000;
4. text-shadow:3px3px1px#600;
5. }

然后我們通過position屬性將兩個文本重疊在一起：

1. h1{
2. position:relative;
3. font-family:Segoe,Verdana,sans-serif;
4. font-size:100px;
5. line-height:100px;
6. text-shadow:-3px04px#006;
7. }
8. h1a:link,
9. h1a:visited,
10. h1a:hover,
11. h1a:active{
12. position:absolute;
13. text-decoration:none;
14. top:0;
15. z-index:2;
16. color:#d12;
17. -webkit-mask-image:-webkit-gradient(linear,lefttop,leftbottom,from(rgba(0,0,0,1)),to(rgba(0,0,0,0)));
18. }

1. h1{
2. position:relative;
3. font-family:Segoe,Verdana,sans-serif;
4. font-size:100px;
5. line-height:100px;
6. text-shadow:-3px04px#006;
7. }
8. h1a:link,
9. h1a:visited,
10. h1a:hover,
11. h1a:active{
12. position:absolute;
13. text-decoration:none;
14. top:0;
15. z-index:2;
16. color:#d12;
17. -webkit-mask-image:-webkit-gradient(linear,lefttop,leftbottom,from(rgba(0,0,0,1)),to(rgba(0,0,0,0)));
18. }

效果如下圖所示：

4、添加背景：

這種實現方式的優勢是我們可以自定義背景，完全不受漸變顏色的影響。例如我們可以為文字添加一副背景，效果如下：

很棒的效果，不是嗎：）

5、其他：

CSS3 mask的詳細信息可以參考Webkit.org的文章。