CSS3圓角圖像的角落不適用於Safari/Chrome？

我很高興地在這個網站上進行測試，並在Firefox和Internet Explorer 9中測試它，當我發現它們沒有時，我認爲Safari和Chrome會渲染我的CSS3。CSS3圓角圖像的角落不適用於Safari/Chrome？

在FF和IE9我看到：

enter image description here

在Safari /鉻我看到這一點：

enter image description here

這裏的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; 
    }

我在做什麼錯？ :(

UPDATE
請參閱我有一個問題的工作，例如：http://jsfiddle.net/jAsnU/3謝謝

嘗試：

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

2011-05-25 19:59:18 ohmusama

我想知道爲什麼這些工作的具體細節，以及爲什麼Webkit瀏覽器沒有隱藏溢出，但這是答案。謝謝！ – 2011-05-25 20:36:09

我最近有同樣的問題。這是唯一對我有用的解決方案。爲什麼它有效？我認爲它是因爲webkit實際上並沒有將基本的父元素舍入註冊給子元素。如果你有一個孩子的div，它可能也需要圓角。你可以做這個實驗並證明這一點。 – ohmusama 2011-05-25 20:55:17

我認爲你需要這樣指定border

，這樣的事情：

border:1px solid blue; //不管藍色您使用。

看起來好像FF和我E正在給你四捨五入的邊框......但是作爲一個切斷圖像的空白項目。

2011-05-25 19:51:52

嘗試增加「溢出：隱藏;」到div的風格。我在jsfiddle上做了一個快速測試頁面，它似乎工作（在Chrome，Safari和FireFox中測試它）：http://jsfiddle.net/wabw8/

2011-05-25 19:59:19 patorjk

雖然你的JS Fiddle可以正常工作，但當我在我的項目上嘗試時，它卻不起作用。很煩人！我認爲它必須與這些事實有關，因爲這些圖像實際上是作爲輪播（http://slidesjs.com/）的一部分由javascript後來添加的。 – 2011-05-25 20:09:07

我沒有看到在該頁面上應用了border-radius（除非您還沒有將其移至生產環境）。 – patorjk 2011-05-25 20:16:27

這裏。你現在可以看到：http://jsfiddle.net/jAsnU/3/ – 2011-05-25 20:29:00

您可能想要嘗試在.container div img上設置邊框半徑。

2011-05-25 19:59:36 Dan

+1謝謝。你的答案奏效了，但是ohmusama給了一個更好的答案。 – 2011-05-25 20:36:32

是的，4人在一分鐘內發佈了對這個問題的答案！哈哈 – Dan 2011-05-25 21:38:23

回答