用CSS來美化網頁字體，最終效果要比使用圖片來代替文字好得多，這一款方法可幫助你實現用CSS來美化文字漸變效果，無需使用JavaScript或Flash，而且兼容主流的網頁浏覽器，IE6除外，不過IE6也快退休了，可以不考慮它了。下面詳細教大家如何實現。
1、先制作一個1像素寬的漸變圖片，漸變的顏色就是你要顯示的文字漸變顏色，請先在Photoshop裡制作好並保存導出為PNG格式。
2、Html代碼：
<h1><span></span>CSS GradIEnt Text</h1>
3、CSS漸變代碼，核心的，重要的，關鍵點是h1 { position: relative } 和h1 span { position: absolute } ：
h1 { font: bold 330%/100% "Lucida Grande";position: relative; color: #464646; }
h1 span { background: url(jianbian.png) repeat-x;position: absolute;display: block; width: 100%; height: 31px; }
4、完整的CSS漸變效果代碼：
<Html>
<head>
<title>CSS使用圖片實現文字漸變</title>
<style>
h1 { font: bold 330%/100% "Lucida Grande";position: relative; color: #464646; }
h1 span { background: url(jianbian.png) repeat-x; /*你剛才制作的PNG圖片，引入到這裡，注意路徑要正確*/ position: absolute;display: block; width: 100%; height: 31px;}
</style>
</head>
<body>
<h1><span>
</span>CSS GradIEnt Text</h1>
</body>
</Html>
至此，一個漂亮的CSS漸變文字就已制作好，今天先給大家介紹這一種方法，還有更多方法後續更新中。