CSS背景色渐变（图例）

CSS背景色渐变（图例）

项目中需要做个渐变色图例，刚看到这个效果我是拒绝的，一张图片解决他不香吗？奈何强迫症犯了就用css写了，看效果图（主要难搞的是下面得半截白线）。

直接上代码

html

	<div class="legendPara">
        <div class="legendParabox">
            <ul class="clearfix">
                <li></li>
                <li></li>
                <li class="mr"></li>
            </ul>
            <p>
                <s>0</s>
                <s>0.3</s>
                <s>0.8</s>
                <s>2</s>
            </p>
        </div>
    </div>

css

	*{
		margin: 0;
		padding: 0;
	}
	li{
		list-style: none;
	}
	s{
		text-decoration: none;
	}
	.legendPara{
		width: 282px;
	    padding: 10px;
	    height: 43px;
	    display: flex;
	    align-items: center;
	    background: rgba(0,0,0,0.3);
	}

	.legendPara ul{
	    width: 278px;
	    height: 23px;
	    padding: 1px;
	    background: linear-gradient(top, transparent 80%, #fff 80%, #fff 100%);
	    background: -ms-linear-gradient(top, transparent 80%, #fff 80%, #fff 100%);
	    background: -webkit-linear-gradient(top, transparent 80%, #fff 80%, #fff 100%);
	    background: -moz-linear-gradient(top, transparent 80%, #fff 80%, #fff 100%);
	}
	.legendPara ul li{
	    float: left;
	    width: 92px;
	    height: 23px;
	    background: pink;
	    margin-right: 1px;
	    border: 1px solid #091220;
	    border-top: 1px solid #091220;
	    border-bottom: 1px solid #091220;
	    box-sizing: border-box;
	}
	.legendPara ul li:nth-child(1){
	    background: linear-gradient(left, #00D9E1, #00FF12);
	    background: -ms-linear-gradient(left, #00D9E1, #00FF12);
	    background: -webkit-linear-gradient(left, #00D9E1, #00FF12);
	    background: -moz-linear-gradient(left, #00D9E1, #00FF12);
	    border-left: 1px solid #091220;
	}
	.legendPara ul li:nth-child(2){
	    background: linear-gradient(left, #fefe23, #FF9600);
	    background: -ms-linear-gradient(left, #fefe23, #FF9600);
	    background: -webkit-linear-gradient(left, #fefe23, #FF9600);
	    background: -moz-linear-gradient(left, #fefe23, #FF9600 );
	}
	.legendPara ul li:nth-child(3){
	    background: linear-gradient(left, #ff1b1b, #950101);
	    background: -ms-linear-gradient(left, #ff1b1b, #950101);
	    background: -webkit-linear-gradient(left, #ff1b1b, #950101);
	    background: -moz-linear-gradient(left, #ff1b1b, #950101);
	    border-right: 1px solid #091220;
	    margin-right: 0;
	}
	.legendPara p{
	    display: block;
	}
	.legendPara p s{
	    font-size: 12px;
	    line-height: 16px;
	    margin-right: 72px ;
	}
	.legendPara p s:nth-last-child(1){
	    margin-right: 0;
	}	

番外篇：
没有营养的文章第二篇，万一一不小心对你有点启发，点个赞！谢谢了！~