.box {
	width:100px;
	height:100px;
	border:1px solid #eee;
	position:relative;
	margin:50px auto;
	background-color:rgb(173,151,173);
}
.box1 {
	width:100px;
	height:100px;
	border:1px solid #eee;
	position:relative;
	margin:50px auto;
	background-color:rgb(100,112,106);
}
.box2 {
	width:100px;
	height:100px;
	border:1px solid #eee;
	position:relative;
	margin:50px auto;
	background-color:rgb(208,215,233);
}
.left-to-right-border {
	position:absolute;
	width:0;
	height:1px;
	background-color:rgba(98,194,60,0.8);
	top:0;
	left:0;
	bottom:0;
	transition:0.5s;
	-webkit-transition:0.5s;
	-moz-transition:0.5s;
	-ms-transition:0.5s;
	-o-transition:0.5s;
	-webkit-box-shadow:0px -3px 5px rgb(81,221,25);
	box-shadow:0px -3px 5px rgb(70,219,11);
}
.right-to-bottom-border {
	position:absolute;
	width:1px;
	height:0px;
	background-color:rgba(98,194,60,0.8);
	top:0;
	right:0;
	transition:0.5s;
	-webkit-transition:0.5s;
	-moz-transition:0.5s;
	-ms-transition:0.5s;
	-o-transition:0.5s;
	-webkit-box-shadow:3px 0px 5px rgb(81,248,15);
	box-shadow:3px 0px 5px rgb(71,233,8);
}
.bottom-to-left-border {
	position:absolute;
	width:0px;
	height:1px;
	background-color:rgba(98,194,60,0.8);
	bottom:0;
	right:0;
	transition:0.5s;
	-webkit-transition:0.5s;
	-moz-transition:0.5s;
	-ms-transition:0.5s;
	-o-transition:0.5s;
	-webkit-box-shadow:0px 3px 5px rgb(80,245,14);
	box-shadow:0px 3px 5px rgb(73,226,12);
}
.bottom-to-start-border {
	position:absolute;
	width:1px;
	height:0px;
	background-color:rgba(98,194,60,0.8);
	bottom:0;
	left:0;
	transition:0.5s;
	-webkit-transition:0.5s;
	-moz-transition:0.5s;
	-ms-transition:0.5s;
	-o-transition:0.5s;
	-webkit-box-shadow:-3px 0px 5px rgb(78,241,13);
	box-shadow:-3px 0px 5px rgb(74,240,8);
}
.box:hover .left-to-right-border {
	width:100%;
	transition:0.5s;
	-webkit-transition:0.5s;
	-moz-transition:0.5s;
	-ms-transition:0.5s;
	-o-transition:0.5s;
}
.box:hover .right-to-bottom-border {
	height:100%;
	transition:0.5s;
	-webkit-transition:0.5s;
	-moz-transition:0.5s;
	-ms-transition:0.5s;
	-o-transition:0.5s;
}
.box:hover .bottom-to-left-border {
	width:100%;
	transition:0.5s;
	-webkit-transition:0.5s;
	-moz-transition:0.5s;
	-ms-transition:0.5s;
	-o-transition:0.5s;
}
.box:hover .bottom-to-start-border {
	height:100%;
	transition:0.5s;
	-webkit-transition:0.5s;
	-moz-transition:0.5s;
	-ms-transition:0.5s;
	-o-transition:0.5s;
}
/* 强大的分割线 */
.box2:hover .left-to-right-border {
	width:100%;
	-webkit-transition-duration:0.2s;
	transition-duration:0.2s;
	-webkit-transition-timing-function:linear;
	transition-timing-function:linear;
	-webkit-transition-delay:0s;
	transition-delay:0s;
}
.box2:hover .right-to-bottom-border {
	height:100%;
	-webkit-transition-duration:0.2s;
	transition-duration:0.2s;
	-webkit-transition-timing-function:linear;
	transition-timing-function:linear;
	-webkit-transition-delay:0.2s;
	transition-delay:0.2s;
}
.box2:hover .bottom-to-left-border {
	width:100%;
	-webkit-transition-duration:0.2s;
	transition-duration:0.2s;
	-webkit-transition-timing-function:linear;
	transition-timing-function:linear;
	-webkit-transition-delay:0.4s;
	transition-delay:0.4s;
}
.box2:hover .bottom-to-start-border {
	height:100%;
	-webkit-transition-duration:0.2s;
	transition-duration:0.2s;
	-webkit-transition-timing-function:linear;
	transition-timing-function:linear;
	-webkit-transition-delay:0.6s;
	transition-delay:0.6s;
}