css3实现鼠标经过，边框线逆时针增显，鼠标移出顺时针消减（不知道怎么描述这个效果，姑且这么写吧）。
css代码如下：
1 *{margin:0; padding:0;} 2 .box{width:200px; height:200px; background-color:#eee; margin:50px; position:relative;} 3 .box i{position:absolute; background-color:#f60; transition:all .1s;} 4 .box i.i1{top:0; right:0; width:0; height:2px; transition-delay:.3s;} 5 .box i.i2{top:0; left:0; width:2px; height:0; transition-delay:.2s;} 6 .box i.i3{bottom:0; left:0; width:0; height:2px; transition-delay:.1s;} 7 .box i.i4{bottom:0; right:0; width:2px; height:0; transition-delay:0s;} 8 .box:hover i.i1{width:200px; transition-delay:0s;} 9 .box:hover i.i2{height:200px; transition-delay:.1s;} 10 .box:hover i.i3{width:200px; transition-delay:.2s;} 11 .box:hover i.i4{height:200px; transition-delay:.3s;}
html代码如下：
1 <div class="box"> 2 <i class="i1"></i> 3 <i class="i2"></i> 4 <i class="i3"></i> 5 <i class="i4"></i> 6 </div>
代码简单，就不提供demo了，效果请看下图
