简介：

对于特效来说，最容易被忽略，但是效果也最好的，当属于边框的特效，曾经我一度以为，这种效果，除了svg是做不出来的，事实证明，CSS3还是很强大的。

效果：

动图效果：

演示地址 笔记及详细代码：

演示地址：

https://yanmingfei.github.io/pages/borderbone/index.html (鼠标移动到图片)

https://yanmingfei.github.io/pages/borderbone/index2.html (鼠标移动到图片)

技巧实现：

其实就是鼠标移上之后，边框由最大尺寸到最小尺寸的过渡。

1.默认效果就是边框宽度(border-width)是父级尺寸的一半

2.总共涉及到四种边框的样式(border-style) solid(实现) dashed(虚线) dotted(点线) double(双线)

3.鼠标移动之后让其，border-width 为0的过渡效果。

代码详解：

1.表面破碎，使用的是伪类元素来承载。即li的:before。默认边框样式为实线。

注意事项：

a)添加过渡属性。

b)因其在图片上方，所以将其固定定位。

c)且将来在过渡变化过程（边框宽度逐渐变小），将其进行居中。需指定left:0; top:0;right:0;bottom:0,margin:0;

更多细节和讲解请登录bbs.520it.com