如何通過使用CSS實(shí)現(xiàn)漸變文字的效果
font: bold 120px Poppins, sans-serif;步驟1：添加漸變
首先，我們需要將漸變添加為背景。
默認(rèn)情況下，漸變會從上到下進(jìn)行，但我們也可以指定方向。
如果要水平漸變，to right可以解決問題，但是稍微傾斜一點(diǎn)60deg看起來更自然。
代碼如下：
.gradient-text {background-image: linear-gradient(60deg, #E21143, #FFB03A);}
如果你想學(xué)習(xí)如何創(chuàng)建所需的任何漸變，你不太了解的話，你只需要復(fù)習(xí)一下，CSS漸變的相關(guān)知識即可。
步驟2：剪輯
現(xiàn)在，我們需要使?jié)u變僅顯示文本的位置。我們可以使用background-clip屬性來實(shí)現(xiàn)這一點(diǎn)。
你可能已經(jīng)知道，使用此屬性，我們可以將背景剪輯到元素的邊框，內(nèi)邊距或內(nèi)容框。
但是它也可以將背景剪切到文本上。
.gradient-text {background-image: linear-gradient(60deg, #E21143, #FFB03A);background-clip: text;}
如果，你嘗試使用此代碼，則看起來漸變消失了。這是因?yàn)闈u變位于文本下方。
步驟3：顯示
為了顯示文本下方的漸變，我們需要使文本透明。我們可以通過設(shè)置color: transparent來做到這一點(diǎn)。
.gradient-text {background-image: linear-gradient(60deg, #E21143, #FFB03A);background-clip: text;color: transparent;}
你可能會在這里使用背景速記，別。
不幸的是，background簡寫版本background-clip不支持該text關(guān)鍵字。
如果必須支持Internet Explorer，則需要回退到純色。
包裝我們之前編寫的所有內(nèi)容@supports。這樣，它只能在現(xiàn)代瀏覽器中呈現(xiàn)。
然后，在@supports塊外，為文本設(shè)置后備顏色。它可能應(yīng)該是出現(xiàn)在你的漸變中的顏色，并且可以與設(shè)計(jì)的其余部分很好地配合使用。
/* 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規(guī)則本身，仍然會忽略里面的所有內(nèi)容。
謝謝閱讀。如有任何疑問，請?jiān)诹粞灾杏懻摗８襾砹私飧郬eb開發(fā)技巧，請記得關(guān)注我。
學(xué)習(xí)更多技能
請點(diǎn)擊下方公眾號
