How to achieve ul li border overlap with css techniques_html/css

How to achieve ul li border overlap with css techniques_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:07:07

Original

1498 people have browsed it

Speaking of overlapping borders, we might as well open the Taobao homepage to browse the main category content section and take a look - dear, you saw it, it is this, the borders are overlapping. In fact, it is not difficult for us to find that this effect is not difficult, but we have never really done it, so we don’t know how to do it. So the following is a good practice. Let us talk about how to use ulli to achieve border overlap. , and comes with mouse passing effect.

Final rendering:

Code:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4     <title></title> 5     <style type="text/css"> 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     </style>12 </head>13 <body>14     <ul class="box">15         <li><a href="#">1</a></li>16         <li><a href="#">2</a></li>17         <li><a href="#">3</a></li>18         <li><a href="#">4</a></li>19         <li><a href="#">5</a></li>20         <li><a href="#">6</a></li>21         <li><a href="#">7</a></li>22         <li><a href="#">8</a></li>23         <li><a href="#">9</a></li>24          <li><a href="#">10</a></li>25         <li><a href="#">11</a></li>26         <li><a href="#">12</a></li>27          <li><a href="#">13</a></li>28         <li><a href="#">14</a></li>29         <li><a href="#">15</a></li>30     </ul>31 </body>32 </html>

Copy after login

You might as well copy it and practice it -.-