预览效果 :
<style>
.type i{
background: -webkit-linear-gradient(-90deg, #caff55 20%, #45cd00 60%); /*背景渐变色*/
-webkit-background-clip: text; /* 规定背景的绘制区域为文字区域*/
-webkit-text-fill-color: transparent; /* 文字填充颜色(这里一定要设置 transparent,不然会覆盖底部的背景色)*/
font-style: normal;
font-size:30px;
font-weight:bold;
}
.box{
width:300px;
height:100px;
color:#fff;
background: -webkit-linear-gradient(-90deg, #ff6600 0%, #ff0000 100%);
background: -moz-linear-gradient(-90deg, #ff6600 0%, #ff0000 100%);
background: -o-linear-gradient(-90deg, #ff6600 0%, #ff0000 100%);
background: -ms-linear-gradient(-90deg, #ff6600 0%, #ff0000 100%);
background: linear-gradient(-90deg, #ff6600 0%, #ff0000 100%);
}
</style>
<div class="type">
<i class="iconfont icon-remen fs26">☀</i>
<i class="iconfont icon-remen fs26">❤</i>
<i class="iconfont icon-remen fs26">渐变字体</i>
</div>
<div class="box"> 背景色渐变</div>