如何在鼠标悬停时为图片设置56px圆角裁剪？

只需要在img:hover选择器中添加border-radius: 56px即可实现需求。另外注意你原代码里border-radius: 50px后面缺少分号，这会导致transition属性不生效，需要补上。

完整CSS代码如下：

.image-wrapper {
  width: 200px;
  height: 200px;
}
 
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50px; /* 补上缺失的分号，保证过渡效果生效 */
  transition: .5s;
}
img:hover {
  border-radius: 56px; /* 悬停时设置56px圆角 */
}

对应的HTML代码保持不变：

<div class="image-wrapper">
  <img src="https://fujifilm-x.com/wp-content/uploads/2021/01/gfx100s_sample_04_thum-1.jpg">
</div>

设置完成后，鼠标悬停在图片上时，会从初始的50px圆角平滑过渡到56px圆角，和你展示的动效一致。

内容的提问来源于stack exchange，提问作者Jonas