间接上成果

看不到成果点这里

办法一：借助 mask-image 属性

<!– more –>

从 CSS 代码能够看出，成果的实现除了“content 内容生成技术”以外，次要是应用了 mask-image 属性，内容则是“webkit 外围浏览器下的突变”了。

<h2 class="text-gradient" data-text="【css 灵感】突变字">【css 灵感】突变字 </h2> 
<style>
.text-gradient {  
    display: inline-block;
    font-family: '微软雅黑';
    font-size: 10em;
    position: relative; 
}  
  
.text-gradient[data-text]::after {content: attr(data-text);  
    color: green;  
    position: absolute;  
    left: 0;  
    z-index: 2;
    -webkit-mask-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0)));
}
</style>

办法二：background-clip + text-fill-color 下的实现

此办法尽管应用的 CSS 属性绝对多些，然而构造简略，易于控制，色彩的选取与管制也更准确，了解上也更容易了解。我集体是举荐应用办法二的。

<h1 class="text-gradient">【css 灵感】突变字 </h1>
<style>
.text-gradient {  
    display: block;
    color: green;
    font-size: 4em;
    text-align:center;
    font-family: '微软雅黑';
    background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#ebeef2), to(#2e9fff));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
};
</style>

看不到成果点这里