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

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

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

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

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

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

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

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

<h1><a href= "#" mce_href= "#" >Jiangyujie</a></h1>

<h1><a href="#" mce_href="#">Jiangyujie</a></h1>

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

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表