效果圖：

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，不然會覆蓋底部的背景色）