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

问题描述

| 我欣喜地入侵了这个网站，并在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谢谢。     

解决方法

尝试：

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

    ,尝试在div样式中添加\“ overflow：hidden; \”。我在jsfiddle上做了一个快速测试页面，它似乎可以正常工作（在Chrome，Safari和FireFox中进行了测试）：http://jsfiddle.net/wabw8/     ,您可能想尝试在.container div img上设置边界半径。     ,我认为您需要指定

border

。 因此，如下所示：

border:1px solid blue;

//无论您使用什么蓝色。 看起来FF和IE给了您圆角的边框...但是作为空白项目，它切断了图像。