css3上下文字渐变

在网页设计中，文字渐变是很常见的效果之一，它可以为网页增添一份艺术感和美感。而CSS3为我们提供了一些强大的文字渐变特效，今天我们就来学习一下CSS3中的上下文字渐变。

.gradient-text {
    font-size: 60px;
    font-weight: bold;
    background: linear-gradient(to bottom,#f0f,#00f);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

CSS3中的上下文字渐变是通过background属性和-webkit-text-fill-color属性配合使用来实现的。我们先来看一下上面的代码。

首先要把字体大小设置得比较大，效果才会显著。然后我们设置一个线性渐变的背景色，从上到下渐变，#f0f到#00f（紫色到蓝色）。注意这里不需要设置背景图片，只要直接指定背景颜色就可以了。

接下来使用-webkit-background-clip属性来裁剪文本框背景，让它刚好放在文字上面（注意这个属性只能在webkit内核的浏览器中使用，如果要兼容所有浏览器，可以使用background-clip）。最后再使用-webkit-text-fill-color设置文本颜色为透明，让文字的颜色就是我们设置的背景渐变色。

最终的效果是一个上下渐变的大标题，很有艺术感。当然，你也可以改变渐变色的方向或者颜色，来实现不同的效果。