css实现文字渐变并兼容IE浏览器

css实现文字渐变并兼容IE浏览器

css文字渐变写法

color: #fff;
background: linear-gradient(to bottom, #fff5b9, #f3d380);
-webkit-text-fill-color:transparent;
-webkit-background-clip: text;

在IE浏览器中不支持这种写法，可以使用svg在IE浏览器中实现文字渐变效果

<svg width="81" height="22">
	<defs>
		<linearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%">
        	<stop offset="0%" style="stop-color:#fff5b9; stop-opacity:1" />
            <stop offset="100%" style="stop-color:#f3d380; stop-opacity:1" />
        </linearGradient>
	</defs>
    <text x="0" y="16" fill="url(#grad)" style="font-size:16px;font-weight: bold;">测试文字</text>
</svg>

x1-x2：是x轴变换
y1-y2：是y轴变换
像demo中的就是从上往下渐变

stop-color：是变化的颜色

亲测有效！！！！！