對文字顏色從左到右（橫向）漸變的一點理解（坑）

zyxn666發表於2018-01-22

    大家對於背景顏色漸變可能比較瞭解，網上資料也很多。但是對於文字文字的漸變相對比較少，文字文字顏色的橫向漸變資料（坑）就更少。本文就是介紹文字文字顏色橫向漸變遇到的坑。

    話不多說，直接上效果圖，一圖勝過千言萬語：

對文字顏色從左到右（橫向）漸變的一點理解（坑）

    程式碼如下：

<html>
<head>
  <title>css樣式demo</title>
  <style type="text/css">
   .changeColor {
      margin-top: 50px;
      font-size: 30px;
      font-weight: bold;
      width: 300px;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-image: linear-gradient(90deg, #0F0, #f00 );
    }
  </style>
</head>
<body>
   <div class="changeColor">文字的顏色漸變demo</div>
</body>
</html>
複製程式碼

    關鍵程式碼就是css裡面的最後四行（或者說是最後倒數第四行的width屬性和最後一行的角度，因為另外兩行你能比較容易搜到答案）！一個塊級div，如果不設定（限制）div盒子寬度，並且螢幕很大的話（比如1920px，而你的文字（很少，只有幾個而已）只有（文字大小* 文字個數）px，這個div預設獨佔一行，你根本看不出文字橫向漸變效果。

    顏色漸變如果不設定角度和方向，預設是從上到下（豎向）的，而豎向的情況下無需設定寬度就能看到漸變效果，此時就要考慮盒子的高度問題了。

總結： 關於文字漸變

     -webkit-background-clip: text;-webkit-text-fill-color: transparent;background-image: linear-gradient(90deg, #0F0, #f00 );

就是跟這三個屬性相關。至於他們能否生效還要看你的盒子寬度和高度是否過大同時你的文字又太少導致看不到明顯效果，是否需要設定具體的值，看具體情況。

   參考文章： 張鑫旭的文字顏色漸變  www.zhangxinxu.com/wordpress/2…

     css3教程：background-image之線性漸變（linear-gradient)最新版！ www.mrszhao.com/post/58.htm…


相關文章