css3樣式代碼實現漸變色文字的三種方法，有一定的參考價值，有需要的朋友可以參考或記錄一下，希望對你有所幫助。

在開發過程中，UI設計師經常會設計一些帶漸變文字的設計圖，給到我們前端程序員，放在以前程序員只能是默默地嘆息，在CSS3誕生后，解決了前端開發過程中的好多個難題，比如動畫，遮罩等等。

我們今天要實現的就是使用純CSS實現漸變色文字，下面是預覽圖：

第1種方法：使用 background-cli、 text-fill-color.gradient-text-one{

background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

第2種方法：使用 mask-image.gradient-text-two{

color:red;

}

.gradient-text-two[data-content]::after{

content:attr(data-content);

display: block;

position:absolute;

color:yellow;

left:0;

top:0;

z-index:2;

-webkit-mask-image:-webkit-gradient(linear, 0 0, 0 bottom, from(yellow), to(rgba(0, 0, 255, 0)));

}

第3種方法：使用 linearGradient、fill.gradient-text-three{

fill:url(#SVGID_1_);

font-size:40px;

font-weight:bolder;

}

花信年華

以上3種方法全部代碼完整DEMO：html>

CSS3漸變字體

*{margin:0;padding:0;}

body,html{width:100%;height:100%;}

.wrapper{width:80%;margin:0?auto;margin-top:30px;}

.gradient-text{

text-align:?left;

text-indent:30px;

line-height:?50px;

font-size:40px;

font-weight:bolder;

position:?relative;

}

.gradient-text-one{

background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.gradient-text-two{

color:red;

}

.gradient-text-two[data-content]::after{

content:attr(data-content);

display:?block;

position:absolute;

color:yellow;

left:0;

top:0;

z-index:2;

-webkit-mask-image:-webkit-gradient(linear,?0?0,?0?bottom,?from(yellow),?to(rgba(0,?0,?255,?0)));

}

.gradient-text-three{

fill:url(#SVGID_1_);

font-size:40px;

font-weight:bolder;

}

方法1.?background-clip?+?text-fill-color

花樣年華

方法2.?mask-image

豆蔻年華

方法3.?svg?linearGradient

花信年華

總結

以上是生活随笔為你收集整理的css3 渐变色 3种,css3实现渐变色文字的三种方法的全部內容，希望文章能夠幫你解決所遇到的問題。

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