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