第一种情况：边框导致背景图抖动>>>>移入前没有边框，移入后显示边框
解决：给背景图添加一个大小相同、透明的边框即可 //border:1px solid transparent;
第二种情况：各浏览器渲染问题>>>>排查所有代码均没有问题，但鼠标移入后出现背景图1-2px抖动，
（笔者删除自己代码特定样式后不再出现抖动：删除父元素width样式、删除margin:0 auto----解决问题）
问题排查：
①ctrl+滚轮放大缩小页面后抖动消失，测试各主流浏览器（谷歌、火狐、opear）在特定大小下均出现hover移入抖动问题，edge无出现该问题
②测试不同电脑(win7、win10、分辨率不同)，谷歌(开发者版、72版)均出现该问题，火狐在高分辨率的屏幕下出现该问题
③重写代码，改变盒子模型大小，放大缩小浏览器检测：在特定大小依旧抖动
解决：暂时找不到解决方案。（如果找到解决方案，欢迎给笔者留言！）
笔者具体代码：
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ghost</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet/less" type="text/css" href="./css/index.less" />
</head>
<body>
<div id="wrap">
<div class="one">
<div class="pic"></div>
<div class="con">
<span class="line line-top"></span>
<span class="line line-right"></span>
<span class="line line-bottom"></span>
<span class="line line-left"></span>
Mission
</div>
</div>
</div>
<script src="./js/less.min.js" type="text/javascript"></script>
</body>
</html>
Less代码：
body{
background-color: #333333;
#wrap{
.one{
width: 205px; //删除解决
margin: 10px;
.pic{
width: 205px;
height: 190px;
background: url("../img/mission.png") center center no-repeat;
transition: all .2s ease-out;
&:hover{
transform: rotate(360deg) scale(1.2);
}
}
.con{
box-sizing: border-box;
width: 180px;
height: 55px;
line-height: 55px;
font-size: 20px;
font-weight: bold;
color: #2DCB70;
padding-left: 30px;
margin:0 auto; //auto计算出来的是12.5px，改成11px
border: 2px solid rgba(255,255,255,0.5);
background: url("../img/allow.png") no-repeat 135px center;
.line{}
.line-top{}
.line-right{}
.line-bottom{}
.line-left{}
&:hover{
border:2px solid rgba(255,255,255,1);
}
}
}
}
}
