CSS3 实现文字渐变的三种方式

1.background-clip、background-image

相关属性

• background-image：为元素设置背景图像

属性	值
url(‘URL’)	指向图像的路径。
none	默认值。不显示背景图像。
inherit	规定应该从父元素继承 background-image 属性的设置。

• background-clip：规定背景的绘制区域

属性	值
border-box	背景被裁剪到边框盒。
padding-box	背景被裁剪到内边距框。
content-box	背景被裁剪到内容框。
text	文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。

代码实例

HTML代码

<p class="font1">你好，这是我的渐变色字体</p>

CSS代码

.font1{
  background-image: -webkit-linear-gradient(bottom, rgb(201, 21, 134), rgb(20, 123, 255));
  -webkit-background-clip: text;
  color: transparent;
}

效果

原理
上面的代码就是先设置背景图为渐变色，然后通过background-clip属性将文字之外的区域都裁剪掉，最后通过 color: transparent;将文字设置为透明色，将后面的背景色显示出来。

2. mask-image

相关属性

• mask-image：详情请点击了解《mask遮罩层详解》
• :before：选择器向选定的元素前插入内容
• content ：来指定要插入的内容。content取值 attr 就是用来获取属性值的，content:attr(属性名);

代码实例

HTML代码

<p class="font2" text="你好，我是渐变色字体">你好，我是渐变色字体</p>

CSS代码

.font2 {
  color:#223aee;
  position: relative;
}

.font2:before{
  content: attr(text);
   position: absolute;
   z-index: 10;
  color:#f82a27;
  -webkit-mask:linear-gradient(to left, #67a621, transparent );
}

效果

原理
利用content: attr(text); 能获取到元素的 text 属性，这里的这个text属性是自己自定义的一个属性。插入内容到<p>元素，然后利用遮罩层的原理让元素的某一部分显示或隐藏，从而实现渐变色字体。

3. background-clip、text-fill-color

相关属性

• text-fill-color：指定文字的填充颜色，详情请了解《CSS3之text-fill-color属性》

代码实例

HTML代码

<p class="font1">你好，这是我的渐变色字体</p>

CSS代码

.font1{
  font-size:22px;
  background-image: -webkit-linear-gradient(bottom, rgb(201, 21, 134), rgb(20, 11, 255));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
 }

效果

原理
上面的代码就是先设置背景图为渐变色，然后通过background-clip属性将文字之外的区域都裁剪掉，最后通过text-fill-color: transparent;将文字填充颜色设置为透明色，将后面的背景色显示出来。