如下图所示：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } body{background-color: pink;} .box{ width: 1000px; margin: 20px auto 0; overflow: hidden; padding: 2px 0 0 2px; } .box li{ float: left; width: 200px; height: 300px; background-color: #c6ff8a; list-style-type: none; border: 2px solid #818ccb; position: relative; z-index: 1; overflow: hidden; padding: 10px 12px 0 12px; margin: -2px 0 0 -2px; } .box li:hover{ border-color: red; z-index: 2; } </style> </head> <body> <ul class="box"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html>
应用margin负值配个外框的padding达到效果。