Shulou(Shulou.com)06/01 Report--

本篇内容介绍了"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全部代码：

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

花样年华

方法2.mask-image

豆蔻年华

方法3.svglinearGradient

花信年华

"css3怎么实现文字渐变效果"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.