css3怎么实现文字渐变效果

本篇内容介绍了“css3怎么实现文字渐变效果”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

为左贡等地区用户提供了全套网页设计制作服务，及左贡网站建设行业解决方案。主营业务为网站建设、成都做网站、左贡网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

　　基础样式：

.gradient-text{

text-align:left;

text-indent:30px;

line-height:50px;

font-size:40px;

font-weight:bolder;

position:relative;

}

　　第一种方法，使用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;

}

　　第二种方法，使用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,00,0bottom,from(yellow),to(rgba(0,0,255,0)));

}

　　第三种方法，使用linearGradient、fill：

.gradient-text-three{

fill:url(#SVGID_1_);

font-size:40px;

font-weight:bolder;

}

花信年华

　　该DEMO全部代码：

*{margin:0;padding:0;}

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

.wrapper{width:80%;margin:0auto;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,00,0bottom,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