css文件渐变虽然兼容性比较差，但是用在移动端和chrome中还是没有问题的。
实现文件渐变的方法有两种
使用 background 的属性
使用 mask 属性
方式一、
<pre style="overflow: auto; margin: 0px 0px 0px 22px; font-size: 12px !important; word-wrap: break-word; font-family: "Courier New" !important;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style> span { font-size: 30px; background: linear-gradient(to right, red, blue); -webkit-background-clip: text; color: transparent;
}
</style>
</head>
<body>
<span>Hello world</span>
</body>
</html></pre>
效果如下
image
-webkit-background-clip W3C支持的属性说明
image
但是并没有text 属性，所以这个只能在chrome上看到效果，在其他浏览器没有实现，它的兼容性就有很大的问题了
-webkit-background-clip: text 用文本剪辑背景，用渐变背景作为颜色填充文本。
缺点：webkit 内核浏览器特有
方式二、
<pre style="overflow: auto; margin: 0px 0px 0px 22px; font-size: 12px !important; word-wrap: break-word; font-family: "Courier New" !important;"><!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<style type="text/css"> h1{ position: relative; color: yellow;
} h1:before{ content: attr(data-text); position: absolute; z-index: 10; color:pink; -webkit-mask:linear-gradient(to left, red, transparent );
}
</style>
</style>
</head>
<body>
<h1 data-text="hello world">hello world</h1>
</body></pre>
效果如下
image
使用：mask-image
缺点：webkit 内核浏览器特有
方法三
image
采用 svg 方式
<html>
<head>
<meta charset="UTF-8">
<title>渐变色</title>
<style>
.box-text { fill: url(#SVGID_1_);
font-size: 40px;
font-weight: bolder; }
</style>
</head>
<body>
<svg viewBoxs="0 0 500 300">
<defs>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="10" x2="0" y2="50">
<stop offset="0" style="stop-color: yellow"/> <stop offset="0.5" style="stop-color: #fd8403"/>
<stop offset="1" style="stop-color: red"/>
</linearGradient>
</defs>
<text text-anchor="middle" x="110px" y="30%">盖世神功</text>
</svg>
</body>
</html>
方法四
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title> 文字立体渐变 - Web前端之家 </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css" title="">
body{background:#333}
.en{font-family:"lucida grande",verdana,sans-serif;font-size:35px;}
.cn{font-family:黑体;font-size:50px;height:80px;overflow:hidden}
.rainbows{position:relative;display:block;}
.rainbow {
background: transparent;
display: block;
position: relative;
height: 1px;
overflow: hidden;
z-index: 5;
}
.rainbow span {
position: absolute;
display: block;
top: 0;
left: 0px;
}
.rainbows .highlight {
color: #fff;
display:block;
position: absolute;
top: -2px;
left: 0px;
z-index: 4;
}
.rainbows .shadow {
color: #000;
display:block;
position: absolute;
opacity: 0.5;
filter:alpha(opacity=50);
top: 2px;
left: 2px;
z-index: 3;
}
</style>
</head>
<body>
<span class="rainbows">© 2017 www.jiangweishan.com. All Rights Reserved.</span>
<span class="rainbows cn" gradToColor="#ff0000">汉字测试：红色渐变</span>
<span class="rainbows cn" gradToColor="#00ff00">汉字测试：绿色渐变</span>
<span class="rainbows cn" gradToColor="#0000ff">汉字测试：蓝色渐变</span>
<span class="rainbows cn" gradToColor="#ffff00">汉字测试：黄色渐变</span>
<span class="rainbows cn" gradToColor="#ff00ff">汉字测试：粉色渐变</span>
<span class="rainbows cn" gradToColor="#00ffff">汉字测试：浅绿渐变</span>
<span class="rainbows cn" gradFromColor="#000000" gradToColor="#ffffff">汉字测试：黑白渐变（不是从白色开始的渐变显示有点异常）</span>
<script src="/demo/js/jq.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function initGradients(s) {
$(function() {
$(s).each(function() {
var el = this;
var from = $(el).attr('gradFromColor')||'#ffffff', to = $(el).attr('gradToColor')||'#000000';
var fR = parseInt(from.substring(1, 3), 16),
fG = parseInt(from.substring(3, 5), 16),
fB = parseInt(from.substring(5, 7), 16),
tR = parseInt(to.substring(1, 3), 16),
tG = parseInt(to.substring(3, 5), 16),
tB = parseInt(to.substring(5, 7), 16);
var h = $(this).height() * 1.5;
var html,cacheHTML=[];
this.initHTML = html = this.initHTML||this.innerHTML;
this.innerHTML = '';
for (var i = 0; i < h; i++) {
var c = '#' + (Math.floor(fR * (h - i) / h + tR * (i / h))).toString(16) + (Math.floor(fG * (h - i) / h + tG * (i / h))).toString(16) + (Math.floor(fB * (h - i) / h + tB * (i / h))).toString(16);
cacheHTML.push('<span class="rainbow rainbow-' + i + '" style="color: ' + c + ';"><span style="top: ' + ( - i - 1) + 'px;">' + html + '</span></span>')
}
cacheHTML.push('<span class="highlight">' + html + '</span>','<span class="shadow">' + html + '</span>');
$(cacheHTML.join('')).appendTo(this)
})
})
}
initGradients('.rainbows');
//-->
</script>
</body>
</html>
实现原理：程序首先算出字体所在容器的高度N，然后清空容器内容，并添加N个span，每个span内容都为原容器的文字，每个span的颜色根据渐变色进行计算，而且其中的文字定位都相比之前一个span的文字向上偏移一个像素。CSS中可以看到，每个span的高度都为1。这样，我们就通过N各不同颜色的1px的span把字体“拼”出来了，然后加上“高光/阴影”就搞定。
