CSS：如何删除图像和边框之间的空间？

Question

我有一个 CSS 图像，悬停时带有框阴影效果，但为什么边框和我的图像之间有空间？我怎样才能删除这个？谢谢

这是我的 box-shadow 悬停效果

这是我的 CSS 代码：

.hover-zoom:hover {
  transition: all 0.3s ease-in;
  transform: scale(1.05);
  box-shadow: rgba(255, 255, 255, 0.5) 0px 8px 50px;
  border-radius: 50%;
}

.hover-zoom {
  transition: all 0.3s ease 0s;
  border-radius: 50%;
  overflow: hidden;
}

.img-box{
  display: block;
  margin: 0;
  padding: 0;
}

这是我的 react-js 代码：

 <Grid item xs={6}>
      <Paper className={classes.paper}>
        <div className="img-box">
          <img src={earth} width="85%" height="85%" className="hover-zoom" />
        </div>
      </Paper>
    </Grid>

谢谢你能解决这个问题！

Answer 1

我不太确定你在说什么间距。如果这与变换后出现的黑色边框有关，您可以使用transform box

transform-box: fill-box