悬停时图像移动 - 边框问题

Question

下面是代码

HTML

<div class="fgimg">
</div>

CSS

.fgimg {
width: 200px;
height: 200px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
background: url('https://c1.staticflickr.com/3/2669/5830411257_b21bf9e931_b.jpg') no-repeat;
margin-left:30%;
margin-top:10px;
background-position: center center;
}
.fgimg:hover {
cursor:pointer;
border-radius: 210px;
border-color:#226fa3;
border:outset;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;

}

这是演示: http ://jsfiddle.net/sathish_opr/03kkqywy/1/

当我们将鼠标悬停在图像上时,图像位置会发生变化.

我希望在悬停时看到图像的边框颜色,但图像位置会自动更改:(

可能是什么问题呢 ？

Answer 1

您可以在正常状态下在图像上设置不可见的边框:

border: 3px outset transparent;

或者您可以申请:

box-sizing: border-box;

这样,边界就会计算出宽度和高度的内部.(例如200px宽度)

演示时间:http: //jsfiddle.net/03kkqywy/4/

BTW:你不再需要在border-radius上添加任何前缀了.但是,如果你这样做,总是将非前缀属性作为最后一个属性.