边界半径不适用于图像

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。根据您的代码，border-radius不适用于<img>标记。你也有容器div填充。所以你应该添加box-sizing: border-box;来修复它。 Read more about box-sizing

FIDDLE HERE

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