CSS 过渡故障

Question

我的 CSS 转换有问题。我创建了一个用户个人资料设计，当用户将鼠标悬停在个人资料照片上时，边框的宽度从 3px 更改为 10px。这会导致整个网站在转换时摇晃。

Shaking can be seen here!

CSS

#timeline-user > .timeline-user-border{
    border: 3px solid #2cbbee;
    padding: 7px;
    border-radius: 35px;
    width: 50px;
    height: 50px;
    -webkit-transition:all 0.2s ease;
}

#timeline-user > .timeline-user-border:hover{
    border: 10px solid #2cbbee;
    padding: 0;
    -webkit-transition:all 0.2s ease;
}

Answer 1

你可以用

box-sizing:border-box;

基本上，添加和删除填充和边框的额外数学会导致很多困惑。您可以通过包含边框和填充来否定这一点。

解决方案: http://jsfiddle.net/mvY4k/2/

希望这对您的问题和任何其他相关问题有所帮助!如果您有任何其他问题，请告诉我! :)