<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
.circleSucess {
width: 10px;
height: 10px;
/*display: inline-block;*/
background-color: red;
border-radius: 50%;
-moz-border-radius: 50%;
/*兼容火狐*/
-webkit-border-radius: 50%;
/*兼容苹果;谷歌等浏览器*/
-o-border-radius: 50px;
/**兼容opera浏览器*/
/***背景色渐变**/
background: -webkit-linear-gradient(top, #CA9F75, #CA9F75);
background: -webkit-linear-gradient(left, #CA9F75, #CA9F75);
background: -webkit-linear-gradient(right, #CA9F75, #CA9F75);
background: -webkit-linear-gradient(bottom, #CA9F75, #CA9F75);
background: -moz-linear-gradient(top, #CA9F75, #CA9F75);
background: -moz-linear-gradient(left, #CA9F75, #CA9F75);
background: -moz-linear-gradient(right, #CA9F75, #CA9F75);
background: -moz-linear-gradient(bottom, #CA9F75, #CA9F75);
background: -o-linear-gradient(top, #CA9F75, #CA9F75);
background: -o-linear-gradient(left, #CA9F75, #CA9F75);
background: -o-linear-gradient(right, #CA9F75, #CA9F75);
background: -o-linear-gradient(bottom, #CA9F75, #CA9F75);
background: linear-gradient(top, #CA9F75, #CA9F75);
}
.circleFail{
width: 10px;
height: 10px;
/*display: inline-block;*/
background-color: #CCCCCC;
border-radius: 50%;
-moz-border-radius: 50%;
/*兼容火狐*/
-webkit-border-radius: 50%;
/*兼容苹果;谷歌等浏览器*/
-o-border-radius: 50px;
/**兼容opera浏览器*/
/***背景色渐变**/
/*background: -webkit-linear-gradient(top, #CA9F75, #CA9F75);
background: -webkit-linear-gradient(left, #CA9F75, #CA9F75);
background: -webkit-linear-gradient(right, #CA9F75, #CA9F75);
background: -webkit-linear-gradient(bottom, #CA9F75, #CA9F75);
background: -moz-linear-gradient(top, #CA9F75, #CA9F75);
background: -moz-linear-gradient(left, #CA9F75, #CA9F75);
background: -moz-linear-gradient(right, #CA9F75, #CA9F75);
background: -moz-linear-gradient(bottom, #CA9F75, #CA9F75);
background: -o-linear-gradient(top, #CA9F75, #CA9F75);
background: -o-linear-gradient(left, #CA9F75, #CA9F75);
background: -o-linear-gradient(right, #CA9F75, #CA9F75);
background: -o-linear-gradient(bottom, #CA9F75, #CA9F75);
background: linear-gradient(top, #CA9F75, #CA9F75); */
}
.lineSuccess {
height: 100px;
width: 2px;
border: none;
/*background-color: red;*/
position: absolute;
margin: auto;
left: 50%;
background: -webkit-linear-gradient(top, #CA9F75, #CA9F75);
background: -webkit-linear-gradient(left, #CA9F75, #CA9F75);
background: -webkit-linear-gradient(right, #CA9F75, #CA9F75);
background: -webkit-linear-gradient(bottom, #CA9F75, #CA9F75);
background: -moz-linear-gradient(top, #CA9F75, #CA9F75);
background: -moz-linear-gradient(left, #CA9F75, #CA9F75);
background: -moz-linear-gradient(right, #CA9F75, #CA9F75);
background: -moz-linear-gradient(bottom, #CA9F75, #CA9F75);
background: -o-linear-gradient(top, #CA9F75, #CA9F75);
background: -o-linear-gradient(left, #CA9F75, #CA9F75);
background: -o-linear-gradient(right, #CA9F75, #CA9F75);
background: -o-linear-gradient(bottom, #CA9F75, #CA9F75);
background: linear-gradient(top, #CA9F75, #CA9F75);
}
.lineFail {
height: 100px;
width: 2px;
border: none;
position: absolute;
margin: auto;
left: 50%;
background: -webkit-linear-gradient(top, #F5F5F5, #EFEEF0);
background: -webkit-linear-gradient(left, #F5F5F5, #EFEEF0);
background: -webkit-linear-gradient(right, #F5F5F5, #EFEEF0);
background: -webkit-linear-gradient(bottom, #F5F5F5, #EFEEF0);
background: -moz-linear-gradient(top, #F5F5F5, #EFEEF0);
background: -moz-linear-gradient(left, #F5F5F5, #EFEEF0);
background: -moz-linear-gradient(right, #F5F5F5, #EFEEF0);
background: -moz-linear-gradient(bottom, #F5F5F5, #EFEEF0);
background: -o-linear-gradient(top, #F5F5F5, #EFEEF0);
background: -o-linear-gradient(left, #F5F5F5, #EFEEF0);
background: -o-linear-gradient(right, #F5F5F5, #EFEEF0);
background: -o-linear-gradient(bottom, #F5F5F5, #EFEEF0);
background: linear-gradient(top, #F5F5F5, #EFEEF0);
}
.out {
width: 10px;
height: 100px;
padding-top: 2px;
padding-bottom: 2px;
position: relative;
}
.content{
font-size: 14px;
width: 200px;
padding-left: 15px;
</style>
<body>
<div style="margin-bottom: 100px;margin-left: 50%;">
<div class="circleSucess">
<div class="content">审核通过</div>
</div>
<div class="out">
<div class="lineSuccess"></div>
</div>
<div class="circleSucess">
<div class="content">等待收(验)货 </div>
</div>
<div class="out">
<div class="lineFail"></div>
</div>
<div class="circleFail">
<div class="content">收(货)正常</div>
</div>
<div class="out">
<div class="lineFail"></div>
</div>
<div class="circleFail">
<div class="content">已完成</div>
</div>
<div class="out">
<div class="lineFail"></div>
</div>
<div class="circleFail">
<div class="content">等待重新发货</div>
</div>
<div class="out">
<div class="lineFail"></div>
</div>
<div class="circleFail">
<div class="content">等待重新发货</div>
</div>
<div class="out">
<div class="lineFail"></div>
</div>
<div class="circleFail">
<div class="content">等待重新发货</div>
</div>
</div>
<!--审核通过 <span></span> 等待收(验)货 <span></span> 收(货)正常 <span></span>
等待重新发货 <span></span> 已完成 审核通过 <span></span> 等待收(验)货 <span></span>
收(验)货完成 <span></span>等待退款 <span></span> 已完成-->
<script>
</script>
</body>
</html>