background-clip + text-fill-color下的實現
如果您手頭上的瀏覽器是Chrome或是Safari，則您可以在demo頁面中看到類似下面的效果：
<h2 class="text-gradient">天賜美妞</h2>
CSS(CSS代碼中關鍵有用的其實就是最后三行):
.text-gradient { display: inline-block; color: green; font-size: 10em; ont-family: ´微軟雅黑´; background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 128, 0, 1)), to(rgba(51, 51, 51, 1))); -webkit-background-clip: text; -webkit-text-fill-color: transparent; };
結語
由於目前text-fill-color屬性貌似就webkit核心的瀏覽器支持，所以兩個demo頁面只能在Chrome瀏覽器或是Safari瀏覽器下才能看到漸變效果。Firefox瀏覽器下純色，IE下就更不用說了。
但是，文字漸變本身就是裝飾性的功能，所以，本着漸進增強的原則，我們在實際項目中其實是可以大膽使用的。在不影響原來功能基礎上，幾行CSS代碼，讓占有率愈來愈高的Chrome瀏覽器下有更好的視覺體驗效果，何樂而不為呢？