html - 如何防止图像溢出圆 Angular 框？

Question

如果我使用这段代码，图像不会被 div 的圆 Angular 剪裁(导致图像的方 Angular 覆盖 div 的圆 Angular ):

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

有谁知道如何获得圆 Angular 的 corder div 以防止子图像溢出？

Answer 1

我最新的 Chrome、Firefox 和 Safari 将图像裁剪到容器的 border-radius(按预期)。

http://jsfiddle.net/RQYnA/12/embedded/result/

在 Firefox 15 中，当容器具有 {overflow: hidden} 时，我看到图像被剪裁了。 ( child 内容的剪辑似乎是 added in Gecko 2.0. )

在 Chrome 23 和 Safari 5 中，当容器具有 {position: static; 时，我看到图像被剪裁仅 overflow: hidden} 并且图片有 {position: static}。