用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渐变文字就已制作好，今天先给大家介绍这一种方法，还有更多方法后续更新中。
