当给元素加鼠标经过特效显示边框时，元素发生位移的解决方法

当我们在给元素添加鼠标经过边框显示特效时，经常会发生偏移的现象该怎么解决？

想要给这个元素添加鼠标经过边框显示特效时，元素会发生位移的原因是，在给元素设置宽高时没有提前把边框所占用的位置给计算在内，所以当边框显示出来时上边框和左边框会把元素的上面和左面的位置给挤开，所以就会有位移的视觉。

解决方法：第一种就是给这个元素在写css样式时先把边框给加上，但是在设置边框颜色值的时候，用rgba(255,255,255,0)的方式写。再给元素加鼠标经过时的效果 :hover{border:边框宽度 线形 rgba(255,255,255,1);}

第二种方法：给这个元素在写css样式时先把边框给加上，把边框的颜色值改成transparent，然后再给元素加鼠标经过时的效果 :hover{border:边框宽度 线形 颜色值;}