在给一个盒子固定尺寸后,想要鼠标经过出现边框,这个时候盒子因为多出1px而跳动(尽管设置了box-sizing: border-box)。
解决方法:给盒子本身设置一个边框,边框的颜色和盒子的父元素的背景颜色相同以达到隐藏边框的效果。
例:卡片背景为白色,所以设置为白色边框。
.box{
border:1px solid #fff;
}
.box:hover{
border:1px solid rgba(165, 110, 255, 0.5);
}
在给一个盒子固定尺寸后,想要鼠标经过出现边框,这个时候盒子因为多出1px而跳动(尽管设置了box-sizing: border-box)。
解决方法:给盒子本身设置一个边框,边框的颜色和盒子的父元素的背景颜色相同以达到隐藏边框的效果。
例:卡片背景为白色,所以设置为白色边框。
.box{
border:1px solid #fff;
}
.box:hover{
border:1px solid rgba(165, 110, 255, 0.5);
}