间接上成果
看不到成果点这里
办法一：借助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>