通过 css 实现文字颜色渐变很简单，只需要用到 css3 的 background-image 和 background-clip 两个属性即可。

示例代码及效果预览

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS3 实现文字渐变色</title>
    </head>
    <style type="text/css">
        #linear-gradient {
            font-size: 24px;
            background-image: linear-gradient(red, blue);
            -webkit-background-clip: text;
            color: transparent;
        }
    </style>
    <body>
        <div id="linear-gradient">零五网(www.02405.com) - 为热爱技术的人而生！</div>
    </body>
</html>

重点说明

background-clip 背景裁剪

目前background-clip: text只有chrome支持，所以我们直接写成-webkit-background-clip:text;
这个属性的意思表示以区块文字作为裁剪区域向外裁剪，文字背景色=区块背景色。

color: transparent;

这个属性的意思就是把文字设为透明，因为我们的文字是有颜色的，只有把文字设为透明后面的背景色才能看到后面的背景色。

(adsbygoogle = window.adsbygoogle || []).push({});