css3文字渐变无效果的解决方案

现在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;
  }

再运行一下,是不是很神奇的事情发生了,文字渐变出现了

 

转载于:https://www.cnblogs.com/0955xf/p/9271280.html