进程条(竖向)

最新推荐文章于 2021-02-26 21:37:53 发布

浅脂弱

最新推荐文章于 2021-02-26 21:37:53 发布

阅读量201

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/mozhi111/article/details/78675438

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!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>

浅脂弱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
进程条(竖向)

.circleSucess { width: 10px; height: 10px; /*display: inline-block;*/ background-color: red; border-radius: 50%; -moz-border-radius: 50%; /*兼容火狐*/ -webkit-border-radius: 50%;
复制链接

扫一扫

专栏目录