html中渐变怎么写,css3如何实现文字渐变？

2.基础样式：

.gradient-text{

text-align:left;

text-indent:30px;

line-height:50px;

font-size:40px;

font-weight:bolder;

position:relative;

}

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

}

4.第二种方法，使用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)));

}

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

.gradient-text-three{

fill:url(#SVGID_1_);

font-size:40px;

font-weight:bolder;

}

花信年华

6.该DEMO全部代码：

CSS3渐变字体

*{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