html - 如何将边框半径添加到填充而不是图像

Question

我正在尝试实现悬停效果，悬停时图像周围会出现一个圆圈。我通过在悬停时添加背景颜色和 50% 边框半径来实现此目的。出现圆圈，但图像在悬停时也有边框半径，我不希望发生这种情况。

#nine-dots{
    width: 17x;
    height: 17px;
    padding: 10px;
}

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

之前的图片:

后像:

Answer 1

您可以使用剪辑路径代替边框半径

img {
  padding: 50px;
}

img:hover {
  background-color: red;
  clip-path: circle(50%);
}

<img src="https://picsum.photos/id/1/150/150">