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

边框重合的奥秘：淘宝首页主体分类内容板块的启示

亲爱的者，当你打开淘宝首页，是否曾被那整齐划一的分类内容板块所吸引？今天，让我们一起其中的边框重合效果，揭开其神秘面纱。其实，这个效果并不难实现，只是我们未曾真正动手实践过。那么，让我们以狼蚁网站SEO优化为例，深入如何使用ul li实现边框重合，并附带鼠标经过时的特效。

让我们先来看看最终效果图，再逐步其背后的代码。将代码复制下来，让我们一起进入这个神奇的网页世界。

HTML结构如下：

```html

{ 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;}

```

在这个代码中，我们定义了一个名为“.box”的类，用于控制整个分类内容板块的样式。每个分类都被包裹在一个`