CSS3圆角图像角落在Safari / Chrome中不起作用？

Question

我很乐意在这个网站上进行攻击，在Firefox和Internet Explorer 9中进行测试，理所当然地认为Safari和Chrome会让我的CSS3变好，当我刚发现它们没有。

在FF和IE9中我看到了：

在Safari / Chrome中我看到了：

这是HTML：

<div class="container">
    <div>
        <img src="static/images/image1.jpg" alt="" />
    </div>

这是CSS：

  .container {
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius: 10px;
  }

我做错了什么？ ：（

更新
请查看我遇到的问题的一个工作示例：http://jsfiddle.net/jAsnU/3谢谢。

Answer 1

尝试：

.container img {
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius: 10px;
}

Answer 2

尝试添加“overflow：hidden;”对于div的风格。我在jsfiddle上做了一个快速的测试页面，它似乎工作（在Chrome，Safari和FireFox中测试过）：http://jsfiddle.net/wabw8/

Answer 3

您可能想尝试在.container div img。

上设置边框半径

Answer 4

我认为您需要指定border。

所以，像这样：

border:1px solid blue; //你正在使用的是什么蓝色。

看起来好像FF和IE正在为您提供圆形边框...但是作为一个空白项目正在切断图像。