英文 | https://bootcamp.uxdesign.cc/gradient-text-in-css-609068d3f953
翻譯 | web前端開發
很難使網站脫穎而出。是以，這裡有一個小技巧，可以改善所有目标網頁或标題：使用漸變文字。
隻要確定不要過度使用它即可。漸變文字絕對不能用在較長的文本中。但可以在标題或者特定醒目的文字上進行使用。以便引起使用者的注意。
可能令你感到驚訝的是，你無法直接将漸變設定為文本顔色，特别是，如果你有設計工具的使用經驗時，可能會好一定，但是如果沒有的話，你可以通過今天的内容學習後，采用CSS來實作這一效果。
例如，color: linear-gradient(yellow, red)将無法正常工作。
但是，漸變文本可以在CSS中實作，它僅需要一些額外的步驟。
最好從一些大膽的文本開始。這将使漸變更明顯，文本更易讀。
我将使用的文本是使用帶有以下值的字型簡寫樣式設定的：
font: bold 120px Poppins, sans-serif; 步驟1：添加漸變
首先，我們需要将漸變添加為背景。
預設情況下，漸變會從上到下進行，但我們也可以指定方向。
如果要水準漸變，to right可以解決問題，但是稍微傾斜一點60deg看起來更自然。
代碼如下：
.gradient-text {
background-image: linear-gradient(60deg, #E21143, #FFB03A);
} 如果你想學習如何建立所需的任何漸變，你不太了解的話，你隻需要複習一下，CSS漸變的相關知識即可。
步驟2：剪輯
現在，我們需要使漸變僅顯示文本的位置。我們可以使用background-clip屬性來實作這一點。
你可能已經知道，使用此屬性，我們可以将背景剪輯到元素的邊框，内邊距或内容框。
但是它也可以将背景剪切到文本上。
.gradient-text {
background-image: linear-gradient(60deg, #E21143, #FFB03A);
background-clip: text;
} 如果，你嘗試使用此代碼，則看起來漸變消失了。這是因為漸變位于文本下方。
步驟3：顯示
為了顯示文本下方的漸變，我們需要使文本透明。我們可以通過設定color: transparent來做到這一點。
.gradient-text {
background-image: linear-gradient(60deg, #E21143, #FFB03A);
background-clip: text;
color: transparent;
} 你可能會在這裡使用背景速記，别。
不幸的是，background簡寫版本background-clip不支援該text關鍵字。
如果必須支援Internet Explorer，則需要回退到純色。
包裝我們之前編寫的所有内容@supports。這樣，它隻能在現代浏覽器中呈現。
然後，在@supports塊外，為文本設定後備顔色。它可能應該是出現在你的漸變中的顔色，并且可以與設計的其餘部分很好地配合使用。
/* fallback for IE */
.gradient-text {
color: red;
}
/* gradient text for modern browsers */
@supports (background-clip: text) {
.gradient-text {
background-image: linear-gradient(60deg, #E21143, #FFB03A);
background-clip: text;
color: transparent;
}
} 注意：即使IE中也不支援@supports規則本身，仍然會忽略裡面的所有内容。
謝謝閱讀。如有任何疑問，請在留言中讨論。跟我來了解更多Web開發技巧，請記得關注我。
學習更多技能
請點選下方公衆号