爲什麼CSS3邊框半徑不能用於webkit瀏覽器（Chrome和Safari）上的圖像？

這適用於firefox 4和ie9，但不適用於Chrome或Safari。它在歌劇中也不起作用，但是誰在乎。那麼如何讓它工作？爲什麼CSS3邊框半徑不能用於webkit瀏覽器（Chrome和Safari）上的圖像？

img { width: 100px; height: 100px; border: 3px solid #fff; 

-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
border-radius: 10px; 

}

來源

2011-06-01 Jacob

「它在Opera中也不起作用，但是誰在乎」？哇，我希望我從不和像你這樣的人一起工作。呸。 – 2011-06-01 05:01:46

一種解決方法是使用一個div並設置div的背景圖像。

.rounded { 
    width: 100px; 
    height: 100px; 
    border: 3px solid #fff; 

    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 

    background: url(image.png) no-repeat; 
}

來源

2011-06-01 02:00:27 alex

對，我只是希望能夠直接對圖片本身進行操作。好吧。 – Jacob 2011-06-01 02:05:36

@Jacob如果您願意，您可以使用JavaScript從'img'自動化交換機。 – alex 2011-06-01 02:06:27

您正在使用白色作爲邊框。你的背景是什麼顏色？我沒有看到我的jsfiddle上的任何問題http://jsfiddle.net/m5NP3/

來源

2011-06-01 02:02:06

想到也許這個圖像突然出現在角落裏，但它看起來也很好，還有一個黑色的太陽眼鏡http://jsfiddle.net/mnbayazit/m5NP3/1/ – mpen 2011-06-01 02:05:47

爲什麼CSS3邊框半徑不能用於webkit瀏覽器（Chrome和Safari）上的圖像？

回答

相關問題