win10系统自带的日历hover效果

先看两个效果的对比

细节处理的不够好，不过没关系，主要是实现划过一个盒子来实现四周盒子的边框逐渐消失的效果

具体代码请点击http://www.skybseo.cn/web/windowsrili.html

实现思路

1.写出静态样式（我的用的是table）

2.创建样式class，

    2.1  创建最中心的hover类，实现划过显示边框。

    2.2  逐个创建四周的class，共8个，例如右侧的样式为划过显示线性渐变的边框，右下的样式为划过显示径向渐变的边框，注意径向渐变的形状为圆形，半径为边框的边长。

3.使用原生js，实现划过显示相应的类，离开遍历数组将class重置。

需要注意的点

1.线性渐变和径向渐变，上下左右的区块使用线性渐变，四个角的区块使用径向渐变，径向渐变的形状为圆形，半径为边框边长，不太了解的可以先去看看css3渐变。

2.使用js显示四周的区块，当鼠标停留的区块在边上或者角落，那么至少有一侧或两侧的区块不应该被显示，可以使用if判断一下，是边角就屏蔽掉不应该显示的区块。

3.用js选中下面的区块，使用的是 td[i+6]，td[i+7]，td[i+8]，但如果选中的是最后一行，那么这三项是超出td的范围的，会提示undefined，我们是用  td[i+6] || dom   ,dom为设置的一个隐藏的节点，意思是，td[i+6] 如果不存在则使用dom节点，如果存在使用td[i+6],类似三目表达式。

具体代码请点击http://www.skybseo.cn/web/windowsrili.html，右击查看源代码。