html - 如何在边界半径变化时停止元素移动？

Question

所以我刚刚获得了一小段代码，我想继续添加更多效果。不过目前，我遇到的问题是当边界半径发生变化(从 0 到 5 像素)时，图像会向下和向右跳，所以并没有真正实现我正在寻找的平滑过渡。这是代码:

<div id="rolloverImageWrapper">
<img src="http://oi60.tinypic.com/2ngartv.jpg" class="rolloverImages" id="rolloverImage_1"/>
</div>

.rolloverImages{
   position: absolute;
   top: 150px;
   -webkit-transition: border-radius 1s; /* Safari */
   transition: border-radius 1s;
}

#rolloverImage_1{
   margin-left: 450px;
}

#rolloverImage_1:hover{
   border:5px solid #FE9505;
   border-bottom:0px solid white;
}

.rolloverImages:hover{
   border-radius:90px;
}


#rolloverImageWrapper{

}

无论如何，提前感谢大家的回答:)

Answer 1

正是边框导致了您所看到的问题。我能够在初始 .rolloverImage 类中使用填充来解决这个问题，然后在悬停时移除填充。

.rolloverImages{
    position: absolute;
    top: 150px;
    -webkit-transition: border-radius 1s; /* Safari */
    transition: border-radius 1s;
    padding: 5px 5px 5px 5px;
}

.rolloverImages:hover{
   border-radius:90px;
   padding: 0px 0px 0px 0px;
}