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实现边框重合并附带鼠标经过效果”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！