[分享]css3文字颜色渐变6

CSS3中提供了许多文本效果，其中文字颜色渐变效果是非常常用的一种。在CSS3中，可以使用lineargradient()方法实现文字颜色渐变，而且非常简单易用。lineargradient()方法中...

CSS3中提供了许多文本效果，其中文字颜色渐变效果是非常常用的一种。在CSS3中，可以使用linear-gradient()方法实现文字颜色渐变，而且非常简单易用。

linear-gradient()方法中可以设置多个颜色参数，用逗号分隔。可以使用百分比或像素值来确定每个颜色的位置，从而实现线性渐变效果。

 .text-gradient {
        background: -webkit-linear-gradient(left, #FF0000, #FFFF00, #00FF00, #00FFFF, #0000FF, #FF00FF);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    } 

在上面的代码中，使用了-webkit-linear-gradient()方法实现了颜色渐变，利用-linear-gradient可以设置文字的颜色渐变，注意这里是设置background，而不是color。另外，设置-webkit-background-clip和-webkit-text-fill-color可以实现将渐变效果应用到文本中。

上面的代码中实现了6种颜色的渐变，在线性渐变效果中，第一个参数left表示渐变的方向，还可以设置top、right、bottom等等。另外需要注意的是，颜色值是可以使用rgba、hsla和hex表示法的。