CSS 过渡故障

Question

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

这里可以看到震动！

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/

希望这有助于解决您的问题和任何其他相关问题！如果您有任何其他问题，请告诉我！:)