Cacher is the code snippet organizer for pro developers

使用 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 的好处是不会改变元素的盒子结构，避免不必要的重绘，导致页面的抖动。