現在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文字漸變無效果的解決方案