使用 box-shadow 来代替 border

高亮边框

.box {
    &:hover {
        border: 1px solid #f00;
    }
}

上述做法有个明显的缺点，由于改变了元素的盒子结构，可能会触发一系列的重绘（页面其他部分会有相应的一些小的偏移）。尽管只是一个很小的方面，但是可能会给用户造成页面不稳定的印象。

我们可以使用 box-shadow 来模拟 border 效果，样式如下：

.box {
    &:hover {
        box-shadow: 0 0 0 1px rgba(90, 155, 255, 0.7);
        z-index: 10;
    }
}

注意: 上面加了个 zIndex 属性，是为了便于 box-shadow 全部显示出来。

box-shadow 的好处是不会改变元素的盒子结构，避免不必要的重绘导致页面抖动。