别总是抱怨生活不够幸运，是你欠生活一份努力。未来美不美，取决于你现在拼不拼！
提到边框重合，我们不妨打开淘宝首页浏览主体分类内容板块瞧瞧---亲，你看到了，正是这个，边框重合。其实我们不难发现，这个效果并不难，只是我们没有真正的动手做过而已，所以不知道怎么做，那么下面就是一个很好的实践，就让我们来谈谈用ul li如何实现边框重合，并附带鼠标经过效果。 最终效果图：
代码：
复制代码
代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
*{ 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;}
</style>
</head>
<body>
<ul class="box">
<li><a rel="nofollow noopener noreferrer" href="#">1</a></li>
<li><a rel="nofollow noopener noreferrer" href="#">2</a></li>
<li><a rel="nofollow noopener noreferrer" href="#">3</a></li>
<li><a rel="nofollow noopener noreferrer" href="#">4</a></li>
<li><a rel="nofollow noopener noreferrer" href="#">5</a></li>
<li><a rel="nofollow noopener noreferrer" href="#">6</a></li>
<li><a rel="nofollow noopener noreferrer" href="#">7</a></li>
<li><a rel="nofollow noopener noreferrer" href="#">8</a></li>
<li><a rel="nofollow noopener noreferrer" href="#">9</a></li>
<li><a rel="nofollow noopener noreferrer" href="#">10</a></li>
<li><a rel="nofollow noopener noreferrer" href="#">11</a></li>
<li><a rel="nofollow noopener noreferrer" href="#">12</a></li>
<li><a rel="nofollow noopener noreferrer" href="#">13</a></li>
<li><a rel="nofollow noopener noreferrer" href="#">14</a></li>
<li><a rel="nofollow noopener noreferrer" href="#">15</a></li>
</ul>
</body>
</html>
不妨copy下来实践一下哦-.-
以上就是用ul li如何实现边框重合并附带鼠标经过效果。愿我们上半年所有的遗憾，都是下半年惊喜的铺垫，加油吧。更多关于用ul li如何实现边框重合并附带鼠标经过效果请关注haodaima.com其它相关文章！
![]("./images/paella-dish.jpg)