CSS 文字渐变的几种方式

css文件渐变虽然兼容性比较差，但是用在移动端和chrome中还是没有问题的。

实现文件渐变的方法有两种

• 使用 background 的属性

• 使用 mask 属性

方式一、

    
    



    Hello world

效果如下

image

-webkit-background-clip W3C支持的属性说明

image

但是并没有text 属性，所以这个只能在chrome上看到效果，在其他浏览器没有实现，它的兼容性就有很大的问题了
-webkit-background-clip: text 用文本剪辑背景，用渐变背景作为颜色填充文本。
缺点：webkit 内核浏览器特有

方式二、

    
hello world

效果如下

image

使用：mask-image
缺点：webkit 内核浏览器特有

方法三

image

采用 svg 方式

方法四

  
  
  
  
  
  
 
 
  © 2017 www.jiangweishan.com. All Rights Reserved. 
  汉字测试：红色渐变
  汉字测试：绿色渐变
  汉字测试：蓝色渐变
  汉字测试：黄色渐变
  汉字测试：粉色渐变
  汉字测试：浅绿渐变
  汉字测试：黑白渐变（不是从白色开始的渐变显示有点异常）


  
  
 

实现原理：程序首先算出字体所在容器的高度N，然后清空容器内容，并添加N个span，每个span内容都为原容器的文字，每个span的颜色根据渐变色进行计算，而且其中的文字定位都相比之前一个span的文字向上偏移一个像素。CSS中可以看到，每个span的高度都为1。这样，我们就通过N各不同颜色的1px的span把字体“拼”出来了，然后加上“高光/阴影”就搞定。