用ul li实现边框重合并附带鼠标经过效果

边框重合这个效果并不难，只是我们没有真正的动手做过而已，下面让我们来谈谈用ul li如何实现边框重合，并附带鼠标经过效果

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 
 4 <head>
 5     <title></title>
 6     <style type="text/css">
 7         * {
 8             margin: 0;
 9             padding: 0;
10         }
11 
12         .box {
13             width: 350px;
14             height: 500px;
15             background: #999;
16             padding-top: 60px;
17             padding-left: 60px;
18         }
19 
20         .box li {
21             float: left;
22             list-style: none
23         }
24 
25         .box li a {
26             border: 5px solid #aaa;
27             display: block;
28             width: 100px;
29             height: 60px;
30             text-decoration: none;
31             margin: 0 0 -5px -5px;
32             position: relative;
33             z-index: 0;
34             text-align: center;
35             line-height: 60px;
36             color: #fff;
37             font-size: 30px;
38         }
39 
40         .box li a:hover {
41             border: 5px solid #333;
42             z-index: 1;
43         }
44     </style>
45 </head>
46 
47 <body>
48     <ul class="box">
49         <li><a href="#">1</a></li>
50         <li><a href="#">2</a></li>
51         <li><a href="#">3</a></li>
52         <li><a href="#">4</a></li>
53         <li><a href="#">5</a></li>
54         <li><a href="#">6</a></li>
55         <li><a href="#">7</a></li>
56         <li><a href="#">8</a></li>
57         <li><a href="#">9</a></li>
58         <li><a href="#">10</a></li>
59         <li><a href="#">11</a></li>
60         <li><a href="#">12</a></li>
61         <li><a href="#">13</a></li>
62         <li><a href="#">14</a></li>
63         <li><a href="#">15</a></li>
64     </ul>
65 </body>
66 
67 </html>