效果图：

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='' οnclick="funActive( this );"> <i class="iconfont icon-remen fs26"></i><p>热门</p></li><li class="type" tapmode="hover" data-id='' οnclick="funActive( this );"> <i class="iconfont icon-remen fs26"></i><p>国内游</p></li><li class="type" tapmode="hover" data-id='' οnclick="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，不然会覆盖底部的背景色）