多个框并排，边框重合，鼠标经过完整边框变颜色

多个元素并排可以用浮动实现，这会使得边框处看起来是2px，解决方案： 1、让每个盒子margin往左侧移动-1px 正好压住相邻盒子边框
2、鼠标经过某个盒子的时候，除了最右边的盒子，都被压住了一条边，这个时候可以提高当天盒子的层级（如果没有定位，则加相对定位（保留位置），如果有定位，则加z-index） CSS部分代码

    ul li {
                width: 150px;
                height: 200px;
                border: 1px solid red;
                float: left;
                margin-left: -1px;
            }     

以下的hover方法二选一

    ul li:hover {
        /* 1、如果盒子没有定位，则鼠标经过添加相对定位即可 */
        position: relative;
        border: 1px solid blueviolet;
    }
    ul li:hover {
        /* 2、如果li都有定位，则利用z-index提高层级 */
        z-index: 1;
        border: 1px solid blueviolet;
    }            

HTML部分代码

    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>