时间戳

首页 > 解决方案 > CSS：如何删除图像和边框之间的空间？

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

问题描述

我有一个悬停时带有框阴影效果的 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>

谢谢，如果你能解决这个问题！

标签： htmlcssreactjs

解决方案

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

transform-box: fill-box

推荐阅读