css设置字体颜色渐变的方法

在前端的web设计中，为了页面的美观经常要用的到渐变的字体。以前的渐变字体一般都是有png图片来替代，但最新的CSS样式脚本中可以使用CSS代码来实现字体的渐变了。下面是实现的方法。

CSS字体颜色渐变的方法

方法1：

<style>
.one{  
    background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow); 
    -webkit-background-clip:text; 
    -webkit-text-fill-color:transparent; 
padding: 20px;
font-size: 40px;
font-weight: bold;
}
</style>
<div class="one">73so博客</div>

ps:

1、background: -webkit-linear-gradient(…) 为文本元素提供渐变背景。

2、webkit-text-fill-color: transparent 使用透明颜色填充文本。

3、webkit-background-clip: text 用文本剪辑背景，用渐变背景作为颜色填充文本。

方法2：

<style>
.two{
   color:red;
   position: relative;
}
.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)));
}
</style>
<h3 class="two" data-content="73so博客">73so博客</h3>

ps:

mask-image 与 background-image 的方法一样，不仅可以取值为图片路径，也可以设置为渐变色。

以上就两种利用css脚本实现字体颜色渐变的方法，说的都是比较简单与理解的。也可以利用svg图片的方法来实现文字的渐变，这里不多介绍了，感兴趣的可以自己行搜索一下。