hover時border效果原理

1. 從中間往兩邊散發：父元素設置相對定位；子元素設置絕對定位；設置子元素高度（有值）和設置寬度（0）來肯定上下border。置子元素高度（0）和設置寬度（有值）來肯定左右border。

<li>
    <i class="before"></i>
    <i class="after"></i>
</li>

li {

     position: relative;

}

i.before {  display: inline-block;  

               width: 0%;  

               height: 200px;  

               position: absolute;  

               top: 0;

               left: 50%;  

               border-top: solid 3px #fff;  

               border-bottom: solid 3px #fff;

               opacity: 0.5;

               transition: width 0.5s,left 0.5s;

              -webkit-transition: width 0.5s,left 0.5s;

              -o-transition:  width 0.5s,left 0.5s;

              -moz-transition:  width 0.5s,left 0.5s;

              filter:  alpha(opacity=50);

}

i.after{ display: inline-block; 

               width: 200px; 

               height: 0; 

               position: absolute; 

               top: 50%;

               left: 0; 

               border-right: solid 3px #fff; 

               border-left: solid 3px #fff;

               opacity: 0.5;

               transition: width 0.5s,left 0.5s;

              -webkit-transition: width 0.5s,left 0.5s;

              -o-transition:  width 0.5s,left 0.5s;

              -moz-transition:  width 0.5s,left 0.5s;

              filter:  alpha(opacity=50);

}

2.給li 設置四個邊框給每一個邊框設置運動時間和延遲時間 實現各類效果。