：hover 加边框导致盒子抖动的解决办法

【现遇到问题如下】

本身盒子无边框，启用：hover之后加上1px的边框，这时候对外显示的效果是盒子整体出现抖动。

【原因】 box-sizing: border-box;

css3盒子模型的特性决定了：盒子宽高已定的情况下，后续加上边框和padding并不会改变盒子最初的大小。

因此，盒子大小不变，新加上的边框只会挤压盒子内部内容物的空间，从而再度调整内容排列。

【解决办法】

在一开始的时候就给盒子加上边框，边框颜色设置为透明，这样一来，鼠标经过前后盒子内容的空间都是一致的。

.sk_container .sk_bd ul li {
    float: left;
    width: 290px;
    height: 462px;
    margin-right: 13px;
    /* 开始状态就是有边框的 */
    border: 1px solid transparent;
    transition: border .5s, box-shadow .5s;
}

.sk_container .sk_bd ul li:hover {
    border: 1px solid #ad2f26;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, .3);
}