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

【问题标题】：CSS3 rounded image corners not working in Safari/Chrome?CSS3 圆角图像在 Safari/Chrome 中不起作用？
【发布时间】：2011-05-26 04:32:10
【问题描述】：

我很高兴地在这个网站上进行黑客攻击，在 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 谢谢。

【问题讨论】：

标签： html css

【解决方案1】：

尝试：

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

【讨论】：

我很想知道为什么这样做的细节，以及为什么 Webkit 浏览器没有隐藏溢出，但这就是答案。谢谢！
我最近遇到了同样的问题。这是唯一对我有用的解决方案。为什么它起作用了？我假设它是因为 webkit 实际上并没有将底层父元素的圆角注册给子元素。如果你有一个子 div，它可能还需要圆角。你可以做这个实验并向自己证明这一点。

【解决方案2】：

尝试添加“溢出：隐藏；”到 div 的样式。我在 jsfiddle 上做了一个快速测试页面，它似乎可以工作（在 Chrome、Safari 和 FireFox 中测试过）：http://jsfiddle.net/wabw8/

【讨论】：

虽然您的 JS Fiddle 工作正常，但当我在我的项目中尝试它时却无法正常工作。很烦人！我认为这一定与图像实际上是稍后由 javascript 作为轮播的一部分添加的事实有关 (slidesjs.com)。
我没有看到该页面上边框半径的应用位置（除非您尚未将其移至生产环境）。
我玩过它，发现如果你在 img,div 标签中添加了“overflow:hidden”，它会在按下“Run”后闪烁圆角。我想知道 slides 方法是否在幕后更改了该属性，但是，我看到为 img 标签设置边框半径修复了一些问题，所以我很高兴你找到了解决方案。

【解决方案3】：

您可能想尝试在 .container div img 上设置边框半径。

【讨论】：

【解决方案4】：

我认为您需要指定border。

所以，是这样的：

border:1px solid blue; //无论你使用什么蓝色。

看起来 FF 和 IE 给你的边框是圆角的......但作为一个空白项目，正在切断图像。

【讨论】：