用CSS來實現顏色的漸變：

<a href="">BUTTON</a>

一、線性漸變：

接下來，對a元素進行樣式修改，并選取兩種顏色來作為漸變的起點和終點：

a{display: inline-block;font-size: 2em;border-radius: 0.3em;text-decoration: none;padding: 1em 2em;color: #ffffff;background: linear-gradient(#79f296, #27ae60);}

• linear-gradient()：用于創建一個表示兩種或多種顏色線性漸變的圖片。
  https://developer.mozilla.org/zh-CN/docs/Web/CSS/linear-gradient
  

漸變的方向默認是從上到下，如果改為從左到右，可以添加 to right參數：

a{background: linear-gradient(to right, #79a9f2, #d61851);}

也可以在方向中加入top或bottom來生成斜向的漸變。

比如使漸變從按鈕左上方起始，到右下方終止：

a{background: linear-gradient(to right bottom, #79a9f2, #d61851);}

還可以在漸變中加入多個色值點，來形成多樣化的色彩效果。

比如，在兩種綠色之間加入藍色：

a{background: linear-gradient(to right, #79a9f2, #26a341, #d61851);}

還可以為每個色值點添加位置百分比，更加精確的控制漸變效果。

使得從0%到40%的區域都為藍色，從60%到100%的區域為紅色，剩下的40%到60%的區域則是由藍色過渡到綠色，再過度到紅色。

a{background: linear-gradient(to right, #79a9f2 40%, #26a341, #d61851 60%);}

設置40%到60%為綠色

a{background: linear-gradient(to right, #79a9f2 40%, #26a341 40%, #26a341 60%, #d61851 60%);}

二、徑向漸變：

默認的徑向漸變是有中心向四周漸變

a{background: radial-gradient(#79a9f2, #d61851);}

使徑向漸變不受元素的影響，始終顯示圓形的漸變效果——添加 circle 參數

a{background: radial-gradient(circle, #79a9f2, #d61851);}

三、文字漸變：

a{font-size: 5em;background: linear-gradient(to right, #79a9f2 40%, #d61851 60%);background-clip: text;-webkit-background-clip: text;color: transparent;}

• background-clip：設置元素的背景（背景圖片或顏色）是否延伸到邊框下面。
  https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-clip
  
  

總結

以上是生活随笔為你收集整理的渐变色绘制的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。