（推荐教程：CSS视频教程）
在web前端开发过程中，UI设计师经常会设计一些带渐变文字的设计图，在以前我们只能用png的图片来代替文字，今天可以实现使用纯CSS实现渐变文字了。下面就介绍3中实现方式供大家参考！
基础样式：
.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; }
说明 ：
background: -webkit-linear-gradient(...)为文本元素提供渐变背景。
webkit-text-fill-color: transparent使用透明颜色填充文本。
webkit-background-clip: text用文本剪辑背景，用渐变背景作为颜色填充文本。
第二种方法，使用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))); }
说明：
mask-image和background-image一样，不仅可以取值是 图片路径，也可以是渐变色。
第三种方法，使用linearGradient、fill：
.gradient-text-three{ fill:url(#SVGID_1_); font-size:40px; font-weight:bolder; }
说明：
在SVG中，有两种主要的渐变类型：
线性渐变（linearGradient）
放射性渐变（radialGradient）
SVG中的渐变不仅可以用于填充图形元素，还可以填充文本元素
dom示例:
CSS3渐变字体 方法1. background-clip + text-fill-color
花样年华
方法2. mask-image
豆蔻年华
方法3. svg linearGradient
效果：
更多编程相关知识，请访问：编程入门！！
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
