边框重合这个效果并不难，只是我们没有真正的动手做过而已，下面让我们来谈谈用ul li如何实现边框重合，并附带鼠标经过效果
<!DOCTYPE html>
<html lang="zh-CN"> <head>
<title></title>
<style type="text/css">
* {
margin: ;
padding: ;
} .box {
width: 350px;
height: 500px;
background: #;
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: -5px -5px;
position: relative;
z-index: ;
text-align: center;
line-height: 60px;
color: #fff;
font-size: 30px;
} .box li a:hover {
border: 5px solid #;
z-index: ;
}
</style>
</head> <body>
<ul class="box">
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</body> </html>