CSS字漸變加投影是一種非常酷炫的效果，可以讓我們的文本像3D效果一樣浮現(xiàn)在頁(yè)面上，讓頁(yè)面看起來(lái)更加生動(dòng)。下面我們來(lái)詳細(xì)了解一下如何實(shí)現(xiàn)這種效果。

.text {
background: linear-gradient(to right, #ff416c, #ff4b2b);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0px 2px 6px rgba(255, 75, 43, 0.6);
}

以上代碼中，我們先定義一個(gè)文本樣式類(lèi)“text”，并在其中設(shè)置了漸變背景，但這里特別注意，我們還需使用“-webkit-background-clip: text;”讓背景填充到文字輪廓內(nèi)，同時(shí)設(shè)置文字顏色為透明的狀態(tài)“-webkit-text-fill-color: transparent;”。現(xiàn)在，可以發(fā)現(xiàn)我們的文字已經(jīng)出現(xiàn)了漸變效果。

接下來(lái)，我們?cè)偌由衔淖滞队埃a如下：

.text {
background: linear-gradient(to right, #ff416c, #ff4b2b);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0px 2px 6px rgba(255, 75, 43, 0.6);
}

以上代碼中“text-shadow”屬性值的含義如下：

• X軸偏移量：0像素
• Y軸偏移量：2像素
• 模糊程度：6像素
• 顏色：rgba(255, 75, 43, 0.6)（紅、綠、藍(lán)值為255、75、43，半透明度為0.6）

有了這個(gè)屬性，我們的文字就能出現(xiàn)投影效果了。

這就是CSS字漸變加投影的基本實(shí)現(xiàn)方法。你可以根據(jù)自己的喜好來(lái)調(diào)整漸變方向、背景顏色、投影偏移量等等，讓你的文本效果更加出彩。