css文字颜色渐变的三种实现方式

1、css文字颜色渐变的三种实现方式在web前端开发过程中，ui设计师常常会设计一些带渐变文字的设计图，在以前我们只能用png的来代替文字，今日可以实现用法纯css实现渐变文字了。下面就介绍3中实现方式供大家参考！基础样式：.gradient-texttext-align:left;text-indent:30px;line-height:50px;font-size:40px;font-weight:bolder;position:relative;第一种办法，用法background-cli、text-fill-color：.gradient-text-onebackground-image:

2、-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-twoco

3、lor:red;.gradient-text-twodata-content:aftercontent: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);解释：mask-image和background-image一样，不仅可以取值是路径，也可以是渐变色。第三种办法，用法lineargradient、f

4、ill：.gradient-text-threefill:url(svgid_1_);font-size:40px;font-weight:bolder;花信年华解释：在svg中，有两种主要的渐变类型：线性渐变（lineargradient）发射性渐变（radialgradient）svg中的渐变不仅可以用于填充图形元素，还可以填充文本元素dom示例:css3渐变字体*margin:0;padding:0;body,htmlwidth:100%;height:100%;.wrapperwidth:80%;margin:0auto;margin-top:30px;.gradient-textte

5、xt-align:left;text-indent:30px;line-height:50px;font-size:40px;font-weight:bolder;position:relative;.gradient-text-onebackground-image:-webkit-linear-gradient(bottom,red,fd8403,yellow);-webkit-background-clip:text;-webkit-text-fill-color:transparent;.gradient-text-twocolor:red;.gradient-text-twodata-content:aftercontent: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-threefill:url(svgid_1_);font-size:40px;font-weight:bolder;办法1.backgro