如何实现hover时为元素内边距加圆角且不改变图片形状？

API 探路者

2026-8-14

解决鼠标悬停时图片被圆角裁剪的问题

问题根源

你直接给图片元素（#nine-dots）设置了border-radius: 50%，这会让图片本身被裁剪成圆形，而非仅显示背景的圆形效果。

解决方案

方案1：用容器包裹图片

给图片套一个外层容器，把悬停时的背景色和圆角样式应用到容器上，图片保持原有形状即可：

代码示例

<div class="dot-wrapper">
  <img id="nine-dots" src="你的图片地址" alt="九点图标">
</div>

.dot-wrapper {
  width: fit-content; /* 容器宽度自适应图片 */
  padding: 10px;
}

.dot-wrapper:hover {
  background-color: rgba(211, 211, 211, 0.334);
  border-radius: 50%;
}

#nine-dots {
  width: 17px;
  height: 17px;
  /* 图片不设置border-radius */
}

方案2：将图片设为元素背景

如果不想额外加容器，可以把图片作为元素的背景图，这样给元素加圆角时只会影响背景色，不会裁剪图片内容：

代码示例

#nine-dots {
  width: 37px; /* 图片尺寸+左右padding */
  height: 37px; /* 图片尺寸+上下padding */
  padding: 10px;
  background-image: url('你的图片地址');
  background-size: 17px 17px;
  background-position: center;
  background-repeat: no-repeat;
}

#nine-dots:hover {
  background-color: rgba(211, 211, 211, 0.334);
  border-radius: 50%;
}