gradient设置上下渐变_前端渐变色字体

渐变色字体案例展示

首先是设置区域渐变色linear-gradient属性

linear-gradient属性有3个参数，分别为方向，渐变色开始颜色，渐变色结束颜色，这里我使用了开始颜色深粉色，结束颜色深蓝色。

我们看到的是正个背景颜色变成了渐变色。但是不是我们想要的字体渐变色，这时候怎么办呢。

裁剪字体区域出来-webkit-background-clip: text属性

它可以将文字所占的区域裁剪出来

这时候我们可以看到，所裁剪区域出来的字体颜色是黑色，这是因为我们没有设置字体颜色(字体颜色默认为黑色)，同时之前设置的渐变色是整个P标签的背景的渐变色，因此，渐变色依旧存在，只不过被上面的黑色字体覆盖了。

将字体变成渐变色

最后一步，我们只需要将字体变成透明色，裁剪出来的形状依旧是字体形状，我们所看到的字体渐变色实际上也就是字体下面的背景颜色了。

总结

通过3个简单的小技巧可以让我们实现字体的渐变色。也许你注意到裁剪属性有-webkit-这个是谷歌浏览器的属性，在其他不支持该属性的浏览器上，也许就无法正常看到渐变色字体了。因此，在使用的时候需要注意在网上查找兼容写法，据说低版本IE浏览器使用滤镜来实现渐变色，以后有空我在试试，今天这篇文章就教到这里。