现在css3越来月流行了,为了实现一些高大上的效果,我们会用一些渐变的特效,请看文字渐变的特效代码:
?.title { ???font-size: 60px; ???line-height: 80px; ???text-align: center; ???margin-top: 15%; ???-webkit-background-clip: text; ????background: linear-gradient(to right, red, blue); ???color: transparent; ?}
?<div class="title"> ???Welcome to our website ?</div>
运行一下,发现没有效果,是不是很奇怪
这个时候我们要改变一下属性的顺序:
.title { ???font-size: 60px; ???line-height: 80px; ???text-align: center; ???margin-top: 15%; ???background: linear-gradient(to right, red, blue); ???-webkit-background-clip: text; ?/*这个属性只能放在background属性的后面*/ ???color: transparent; ?}再运行一下,是不是很神奇的事情发生了,文字渐变出现了
css3文字渐变无效果的解决方案
原文地址：https://www.cnblogs.com/0955xf/p/9271280.html