关于仿制Win10桌面日历鼠标悬浮效果有感

今天，正好在群里看见一位小伙伴在求助实现这种win10日历的效果

-----> 此处暂无图片，具体效果可以去网上查阅相关效果

于是，我开启了自己的实现之路：

      思路：将这种边框透明的渐变效果转为一张具有这种实现的图片，这样在每次hover的时候替换图片就可以了

      html实现:     

• <div class="test">
•     <ul>
•         <li>1</li><li>2</li><li>3</li>
•         <li>4</li><li>5</li><li>6</li>
•         <li>7</li><li>8</li><li>9</li>
•     </ul>
• </div>

      很简单的布局

       接下来是css的实现及解释：

• .test ul{
•         display: block;
•         overflow: hidden;    //如果子类超过该ul大小，直接剪裁
•         position: relative;   //整张图片是以ul标签的大小定的，因此以其为基准
• }
• .test ul li{    //这几个属性的实现比较通俗，不解释
•         l