Html 如何在使用hover伪类应用css边框时避免css抖动

当我使用：hover伪类向div添加边框时，它会产生抖动。如何避免这种情况

<div class="mybox">
</div>


//in css file

.mybox:hover{
   border:1px solid gray;
}

//在css文件中
.mybox:悬停{
边框：1px纯色灰色；
}

---

使用

大纲

而不是

边框

---

最初可以设置白色/透明边框，然后悬停将边框颜色更改为灰色

.mybox{
边框：1px纯白
}
.mybox:悬停{
边框颜色：灰色；
}

这是文本

您还可以设置一个透明颜色作为开始？那么这是否适用于任何背景色

.mybox{
边框：1px实心rgba（0,0,0,0）；
}
.mybox:悬停{
边框颜色：灰色；
}

这是文本

.mybox:hover{
outline: #00FF00 solid thick;
}