元素边框不占高度

问题

.container{
  width: 500px;
  height: 500px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: wrap;
}

.box{
  width: 150px;
  height: 150px;
  background-color: aqua;
  line-height: 300px;
}

.box:hover{
  border: 10px red solid;
}

<div class="container">
  <div class="box" ></div>
  <div class="box" ></div>
  <div class="box" ></div>
  <div class="box" ></div>
  <div class="box" ></div>
  <div class="box" ></div>
</div>

当我们鼠标悬停的时候，选中的元素宽高就根据 border 的宽度进行增大，造成自适应的元素进行相对应的调整，就会发现元素在跳动，影响使用。

解决方法

使用 box-shadow 来替代 border 即可，通过向外的阴影实现边框效果。

.box:hover{
 /* border: 10px red solid; */
  box-shadow: 0 0 0 10px red;
}

参数

box-shadow（x , y, blur, spread, color position)

• x 阴影横向偏移
• y 阴影纵向偏移
• blur 向外延伸的模糊程度
• spread 阴影尺寸（类似 border 的宽度）
• color 阴影颜色
• position 默认向外延伸，inset 向内延伸，none 无样式