一、文本颜色渐变

<gradient> ：可以应用在所有接受图像的属性上，允许使用简单的语法实现颜色渐变，以便UA在渲染页面自动生成图像。

语法：<gradient> =  |  |  | 

注意：必需在一个有尺寸的盒子里生成。如果盒子没有尺寸，渐变效果则无法呈现。

可以作用在能接受图像的任意属性上：

background-image: -webkit-gradient(linear, left 0, right 0, from(rgb(4, 94, 170)), to(rgb(1, 152, 216))); list-style-image: -webkit-gradient(linear, left 0, right 0, from(rgb(4, 94, 170)), to(rgb(1, 152, 216)));

文字颜色渐变比较麻烦，并且兼容性差强人意：

background-image: -webkit-gradient(linear, left 0, right 0, from(rgb(4, 94, 170)), to(rgb(1, 152, 216)));    -webkit-background-clip: text; /*必需加前缀 -webkit- 才支持这个text值 */    -webkit-text-fill-color: transparent; /*text-fill-color会覆盖color所定义的字体颜色： */

兼容性：

text-fill-color，IE果然又不兼容。移动端UC浏览器也不兼容。

 -webkit-background-clip: text; 非正式属性，目前（2017-07-07）仅仅FF、Chrome、Safari支持，并且必须带前缀。

 

 

二、代码示例

     
      css字体文字渐变,css字体文字渐变
     

.demo {
     width: 500px;  height: 200px;  margin: 50px auto;  font-size: 20px;  background-image: -webkit-gradient(linear, left 0, right 0, from(rgb(166, 4, 249)), to(rgb(251, 223, 11)));  /*必需加前缀 -webkit- 才支持这个text值 */  -webkit-background-clip: text;  /*text-fill-color会覆盖color所定义的字体颜色： */  -webkit-text-fill-color: transparent;}

 

显示结果：

 

更多：