css3如何实现文字渐变？css3实现文字渐变的三种方法（代码）_知识百科

本篇文章给大家带来的内容是关于css3如何实现文字渐变？css3实现文字渐变的三种方法（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

在开发过程中，ui设计师经常会设计一些带渐变文字的设计图，给到我们程序员，而我们程序员们呢，大多都是默默地叹息传来，不过css3的诞生，解决了前端开发过程中的好多个难题，比如动画，遮罩等等

1. 我们今天要实现的就是使用纯CSS实现渐变文字，下面是预览图片：

立即学习“前端免费学习笔记（深入）”；

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, 0 0, 0 bottom, 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渐变字体    tps://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">    <ｓｃｒｉｐｔ src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js">    <ｓｃｒｉｐｔ src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js">                            
                
方法1. background-clip + text-fill-color
            
                            
花样年华
            
        
                    
                
方法2. mask-image
            
                            
豆蔻年华
            
        
                                
                
方法3. svg linearGradient