上一期介绍了CSS3 + jQuery 的放大镜效果实测。
这一期为大家带来边框过度的CSS3样式效果。
该效果完全由CSS3的 :hover事件 与 transition 样式组成，是不是觉得很炫？
代码测试：
html部分：
<a href="#" class="one"></a>
<a href="#" class="two"></a>
<a href="#" class="three"></a>
<br />
<a href="#" class="yon"></a>
<a href="#" class="goo"></a>
<a href="#" class="rok"></a>
<a href="#" class="ryk"></a>
<br />
<a href="#" class="x7"></a>
<a href="#" class="x8"></a>
<a href="#" class="x9"></a>
CSS3部分：
body {
padding: 100px 20px;
}
a {
background-image:url(http://www.frontopen.com/wp-content/uploads/2012/11/car.gif);
background-position: 50% 50%;
background-repeat: no-repeat;
background-origin: border-box;
display: inline-block; width: 100px; height: 100px;
border-width: 50px;
border-color: rgba(0,0,0,0);
border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: 0.5s ease;
-moz-transition: 0.5s ease;
-ms-transition: 0.5s ease;
-o-transition: 0.5s ease;
transition: 0.5s ease;
}
a:hover {
border-width: 0;
border-color: rgba(0, 0, 0, 0.5);
}
.one{border-style: solid;}
.two{border-style: dashed;}
.three{border-style: dotted;}
.yon {border: 50px solid rgba(0, 0, 0, 0.7);}
.goo {border: 50px dashed rgba(0, 0, 0, 0.7);}
.rok {border: 50px dotted rgba(0, 0, 0, 0.7);}
.ryk {border: 50px double rgba(0, 0, 0, 0.7);}
.yon:hover{border: 1px solid rgba(0, 0, 0, 0.7);}
.goo:hover{border: 1px dashed rgba(0, 0, 0, 0.7);}
.rok:hover{border: 1px dotted rgba(0, 0, 0, 0.7);}
.ryk:hover{border: 1px double rgba(0, 0, 0, 0.7);}
.x7, .x8, .x9 {
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
}
.x7 {border: 50px solid rgba(0, 0, 0, 0.7);}
.x8 {border: 50px dashed rgba(0, 0, 0, 0.7);}
.x9 {border: 50px dotted rgba(0, 0, 0, 0.7);}
.x7:hover {border: 1px solid rgba(0, 0, 0, 0.7);}
.x8:hover {border: 1px dashed rgba(0, 0, 0, 0.7);}
.x9:hover {border: 1px dotted rgba(0, 0, 0, 0.7);}
源文件：点击下载
