如何防止图像溢出圆角框？

Question

如果使用此代码，则div的圆角不会剪切图像（结果是图像的方形角覆盖了div的圆角）：

<div style="border-radius: 1em; -moz-border-radius: 1em; -webkit-border-radius: 1em; overflow:hidden;">
    <img src="big-image.jpg" />
</div>

有谁知道如何获得一个圆形的div来防止子图像溢出？

Answer 1

这可能会或可能不会在您遇到的情况下起作用，但请考虑使图像成为CSS背景。在FF3中，以下工作正常：

<div style =“
  背景图片：url（big-image.jpg）;
  边界半径：1em；
  高度：100px；
  -moz-border-radius：1em；
  宽度：100像素；”
> </ div>

我不确定还有另一种解决方法-如果您对图像本身应用边框（例如，1em较深），则会遇到同样的方形角问题。

编辑： 尽管在“为图像添加边框”情况下，图像插图是正确的，只是图像与div元素不齐平。要检查结果，请添加style="border:1em solid black;border-radius:1em;-moz-border- radius:1em;"到img标签中（使用width并height根据需要进行适当设置）。