字体图标或文字的渐变效果

效果图：

css：

                .bang .wrapper .scroller ul{
			line-height: 3.4rem;
			height: 100%;
			display: -webkit-flex;
		}
		.bang .wrapper .type{
			width: 5rem;
			display: inline-block;
			margin: 0 9px;
			overflow: hidden;
			color: #484E4B;
			font-size: 1.4rem;
			text-align: center;
		}
		.bang .wrapper .type i{
			background: -webkit-linear-gradient(-45deg, #caff55 20%, #45cd00 60%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
		.bang .wrapper .type p{
		    line-height: 1.6rem;
		    position: relative;
		    top: -5px;
		}
   	 	.run-line {
     		height: 2px;
			width: 5rem;
		    position: absolute;
		    left: 12px;
		    bottom: 5px;
		    background-color: #41D540;
		    -webkit-transition: all .3s;
		    transition: all .3s;
		    border-radius: 1px;
	  	}

html：

            <ul class="type-box">
                <li class="type" tapmode="hover" data-id='' onclick="funActive( this );"> 
                    <i class="iconfont icon-remen fs26"></i>
                    <p>热门</p>
                </li>
                <li class="type" tapmode="hover" data-id='' onclick="funActive( this );"> 
                    <i class="iconfont icon-remen fs26"></i>
                    <p>国内游</p>
                </li>
                <li class="type" tapmode="hover" data-id='' onclick="funActive( this );"> 
                    <i class="iconfont icon-remen fs26"></i>
                    <p>出境游</p>
                </li>
            </ul>

其中：i 标签为渐变。
核心思想为下面 3 条属性值。
    1、background: -webkit-linear-gradient(-45deg, #caff55 20%, #45cd00 60%);
        设置渐变的背景
    2、-webkit-background-clip: text;
        规定背景的绘制区域为文字区域
        这个属性还有其他值：
            border-box (默认)    背景被剪裁到边框盒
            padding-box            背景被剪裁到内边距框
            content-box             背景被剪裁到内容框
    3、-webkit-text-fill-color: transparent;
        文字填充颜色（这里一定要设置 transparent，不然会覆盖底部的背景色）