css3动态边框

<ul class="partnersLogo">
　　<li>
　　　　<a href="http://www.chinapnr.com/" target="_blank">
　　　　　　<div class="border_top"></div>
　　　　　　<div class="border_right"></div>
　　　　　　<div class="border_bottom"></div>
　　　　　　<div class="border_left"></div>
　　　　　　<img src="../images/home/partnersLogo2.jpg" alt="" />
　　　　</a>
　　</li>
</ul>

　　.partners li a{
　　　　display:block;
　　　　}
　　.partners li{
　　　　float:left;
　　　　height:39px;
　　　　padding:12px 0;
　　　　line-height:39px;
　　　　margin-right:7px;

　　　　position:relative;
　　　}

.border_top{
	position:absolute;
	height:1px;
	width:0;
	font-size:0;
	background:#49d6da;
	top:11px;
	left:-1px;
	-webkit-transition:all 0.3s ease-out;
	-o-transition:all 0.3s ease-out;
	transition:all 0.3s ease-out;
}
.border_right{
	position:absolute;
	height:0;
	width:1px;
	font-size:0;
	background:#49d6da;
	bottom:9px;
	right:-1px;
	-webkit-transition:all 0.3s ease-out;
	-o-transition:all 0.3s ease-out;
	transition:all 0.3s ease-out;
}
.border_bottom{
	position:absolute;
	height:1px;
	width:0;
	font-size:0;
	background:#49d6da;
	right:0;
	bottom:9px;
	-webkit-transition:all 0.3s ease-out;
	-o-transition:all 0.3s ease-out;
	transition:all 0.3s ease-out;
}
.border_left{
	position:absolute;
	height:0;
	width:1px;
	font-size:0;
	background:#49d6da;
	left:-1px;
	top:12px;
	-webkit-transition:all 0.3s ease-out;
	-o-transition:all 0.3s ease-out;
	transition:all 0.3s ease-out;
}
.partners li a:hover .border_top{width:120px}
.partners li a:hover .border_bottom{width:119px}
.partners li a:hover .border_left,.partners li a:hover .border_right{height:42px}