利用css伪类制作空心圆、半空心圆、双层空心圆

body {
		padding: 10%;
		color: #fff;
	}
	/*空心圆*/
	.kxy {
		margin: 10px 0;
		width: 10px;
		height: 10px;
		background-color: #fff;/*background-color: transparent;*/
		position: relative;
		border-radius: 50%;
		border: 5px solid red;
	}
	/*end 空心圆*/
	
	/*双层空心圆*/
	.sckxy {
		margin: 10px 0;
		width: 6px;
		height: 6px;
		background-color: transparent;
		position: relative;
		border-radius: 50%;
		border: 2px solid #F8FF00;
	}	
	.sckxy:after {
		position: absolute;
		height: 18px;
		width: 18px;
		background-color: transparent;
		left: -8px;
		top: -8px;
		content: '';
		border-radius: 50%;
		border: 2px solid #F8FF00;
		
	}
	/*end 双层空心圆*/
	
	/*中空空心圆*/
	.zkkxy {
		margin: 10px 0;
		width: 8px;
		height: 8px;
		background-color: #fff;
		position: relative;
		border-radius: 50%;
	}
	.zkkxy:after {
		position: absolute;
		height: 16px;
		width: