边框半径未应用于图像

Question

边框半径未应用于图像

4

为了方便以后添加按钮，我将图片放在了它们自己的独立 div 中。然后，我尝试重新应用之前有效的边框半径，但它并没有应用到图片上。然而，当我对不在 div 中的项使用时，它可以正常工作。

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

- Unscrupulous

2

尝试使用overflow: hidden;。我以为这不再需要了，但也许还是需要的。 - Rudie

你能否创建一个 Fiddle 来展示 HTML 的问题？ - 1Bladesforhire

工作了，非常感谢！出于好奇，为什么这只在 div 内部是必要的？ - Unscrupulous

@dippas，问者询问关于<div class="image1"><img ...></div>的问题。在这种情况下，图片确实溢出了div：http://jsfiddle.net/azjku939/ - Leon Adler

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- philos · Accepted Answer

你应该在容器div上添加overflow: hidden;的css样式。因为你正在将border-radius应用于一个div上，而你的代码中<img>标签不支持border-radius。此外，你在容器div上设置了padding。所以你应该添加box-sizing: border-box;来解决这个问题。阅读有关box-sizing的更多信息。

点此查看FIDDLE

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