失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > css实现文字渐变并兼容IE浏览器

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

时间:2020-10-05 07:07:01

相关推荐

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:是变化的颜色

亲测有效!!!!!

如果觉得《css实现文字渐变并兼容IE浏览器》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。