如何用CSS創建從底部到頂部顏色漸變（紅-橙-黃）的文字效果？

css炫酷文字漸變效果：紅-橙-黃線性漸變

想在網頁中打造引人注目的文字漸變效果？例如，從底部紅色漸變到橙色再到黃色？本文將提供詳細的css代碼實現方法。

目標：創建從底部開始，顏色由紅-橙-黃線性漸變的文字效果。

解決方案：利用CSS的linear-gradient函數及相關屬性即可輕松實現。核心代碼如下：

p {   background-image: linear-gradient(to top, red, #fd8403, yellow); /* 使用標準屬性 */   background-clip: text; /* 去除瀏覽器前綴 */   -webkit-background-clip: text; /* 保持兼容性，針對webkit內核瀏覽器 */   color: transparent; /* 去除瀏覽器前綴 */   -webkit-text-fill-color: transparent; /* 保持兼容性，針對webkit內核瀏覽器 */ }

代碼解析：

立即學習“前端免費學習筆記（深入）”；

• background-image: linear-gradient(to top, red, #fd8403, yellow); 設置線性漸變背景，to top 指定漸變方向為從下往上，red, #fd8403, yellow 分別代表起始色、中間色和結束色。 我們使用了標準的linear-gradient(to top, …)語法，并保留了-webkit-前綴以保證更廣泛的瀏覽器兼容性。

• background-clip: text; 和 color: transparent; 將背景圖片裁剪到文本區域，并使文本本身顏色透明，從而顯示漸變背景。 同樣，我們使用了標準屬性并保留了-webkit-前綴以保證兼容性。

這段CSS代碼能夠在大多數現代瀏覽器中完美運行，創建出令人驚艷的文字漸變效果。