css技巧之如何实现ulli边框重合_html/css_WEB-ITnose

提到边框重合，我们不妨打开淘宝首页浏览主体分类内容板块瞧瞧---亲，你看到了，正是这个，边框重合。其实我们不难发现，这个效果并不难，只是我们没有真正的动手做过而已，所以不知道怎么做，那么下面就是一个很好的实践，就让我们来谈谈用ul li如何实现边框重合，并附带鼠标经过效果。

最终效果图：

代码：

 1   2   3   4        5       6     *{ margin:0; padding:0;} 7     .box{ width:350px; height:500px; background:#999; padding-top:60px; padding-left:60px;} 8     .box li{ float:left; list-style:none} 9     .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;}10     .box li a:hover{ border:5px solid #333; z-index:1;}11      12  13  14      15          1 16          2 17          3 18          4 19          5 20          6 21          7 22          8 23          9 24           10 25          11 26          12 27           13 28          14 29          15 30      31  32   

不妨copy下来实践一下哦-.-

查看更多关于css技巧之如何实现ulli边框重合_html/css_WEB-ITnose的详细内容...