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 设置四个边框给每个边框设置运动时间和延迟时间 实现各种效果。