随着 CSS 的最新进展，我们现在能够获得强大的造型技术，包括容器阴影，圆角，背景渐变等等。但我们目前没有能力在文本上运用渐变效果。幸运的是，在这篇纯 CSS 实现文本渐变效果使用一些花招，我们可以迫使代码呈现这种效果，至少在 Webkit 引擎浏览器中如此！
最终代码：
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>Text Gradients</title>
<link href=’http://fonts.googleapis.com/css?family=Lobster’ rel=’stylesheet’ type=’text/css’>
<style>
body {
background: #292929;
padding: 1em;
}
h1 {
position: relative;
font-size: 70px;
margin-top: 0;
font-family: ‘Lobster’, helvetica, arial;
}
h1 a {
text-decoration: none;
color: #666;
position: absolute;-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,.5)), to(rgba(0,0,0,1)));
}
h1:after {
content : ‘Hello World’;
color: #d6d6d6;
text-shadow: 0 1px 0 white;
}
</style>
</head>
<body>
<h1> <a href=”#”> Hello World </a> </h1>
</body>
</html>
这个方法来自 NiceWebType.com 网站。
英文原文：Quick Tip: Pure CSS Text Gradients | Nettuts+
