web开发中怎么用ulli实现边框重合并附带鼠标经过效果-创新互联

小编给大家分享一下web开发中怎么用ul li实现边框重合并附带鼠标经过效果，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

效果图：
 
代码：

 
 
 
 
 
*{ margin:0; padding:0;} 
.box{ width:350px; height:500px; background:#999; padding-top:60px; padding-left:60px;} 
.box li{ float:left; list-style:none} 
.box li a{ border:5px solid #aaa; display:block; width:100px; height:60px; text-decoration:none; margin:0 0 -5px -5px; position:relative; z-index:0; text-align:center; line-height:60px; color:#fff; font-size:30px;} 
.box li a:hover{ border:5px solid #333; z-index:1;} 
 
 
 
 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
9
 
10
 
11
 
12
 
13
 
14
 
15
 
 
 

看完了这篇文章，相信你对“web开发中怎么用ul li实现边框重合并附带鼠标经过效果”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！