css鼠标移入盒子添加border时发生抖动

需求:当鼠标移入一个盒子时,需要给盒子添加一个1px的border的边框

解决方法:把鼠标未移入时的class,增加一个样式 border: 1px solid transparent; 

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

  .box{
    height: 350px;
    width: 350px;
    background: green;
    border: 1px solid transparent;
  }
  .box:hover{
    border: 1px solid red;
  }