相邻的元素中，默认每个都有边框，当这些元素都浮动时，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } div { width: 200px; height: 300px; border: 10px solid #ccc; float: left; } </style> </head> <body> <div></div> <div></div> <div></div> <div></div> </body> </html>
效果如下：
pic01 
不防给元素设置margin-left属性，属性值为负数且等于border-width.这样每一个元素向左移动，后面的元素的左边框可以压住前一元素的右边框(见pic02)。
当我们鼠标移入一个元素时，为了让此元素的边框高亮显示，可以使用伪元素（见pic03）。
为了让此元素的所有边框高亮显示，需要在伪类中添加定位（relative）（见pic04）。
div { width: 200px; height: 300px; border: 10px solid #ccc; float: left; margin-left: -10px; } div:hover { border-color: red; position: relative; }
效果图如下：
pic02 
pic03 
pic04 
若原来的元素已有定位（relative），需要在伪类中设置高一点的层级。
div { width: 200px; height: 300px; border: 10px solid #ccc; float: left; margin-left: -10px; position: relative; /*若有此定位属性，默认有了层级的概念，值是0.为了效果显示出来，需要在伪类中设置高一点的层级*/ } div:hover { border-color: red; position: relative; z-index: 1; /*大于默认值0的数值即可*/ }