边界半径不适用于图像

Question

为了以后添加按钮，我将图像放置在各自的div中。 此后，我尝试重新应用以前有效的边框半径，但该边框半径不适用于图像。 但是，当我在不在div中的项目上使用它时，它可以正常工作。

.image1 {
  padding:0 13px 0 0;
  float: left;
  width: 220px;
  border-radius: 40px;
}

Answer 1

您应该添加overflow: hidden; 容器div的CSS。 因为您要在div上应用border-radius 。 根据代码中的<img>标记，border-radius不适用。 另外，您在容器div上也有填充。 因此，您应该添加box-sizing: border-box; 要解决这个问题。 进一步了解Box-Sizing

在这里

.image1 {
  padding:0 13px 0 0;
  float: left;
  width: 220px;
  border-radius: 40px;
  overflow:hidden;
  box-sizing:border-box;
}