邊緣半徑設置在父div上修剪圖像邊角在Safari中不起作用

Question

我有一個放在div內的圖像，div具有圓角，用作掩碼來隱藏圖像邊角並將其顯示爲圓形。它適用於除Safari之外的所有瀏覽器！有誰知道如何解決它？

我試過-webkit-padding-box,-webkit-mask-box-image但都沒有工作。

HTML：

<div class="cat"><img src="images/colorful-flowers-hd-wallpaper.jpg" /></div> 

CSS：

.cat{ 
    width: 128px; 
    height: 128px; 
    margin: 20px 96px 0px 96px; 
    position: relative; 
    float: left; 
    border-radius: 50%; 
    overflow: hidden; 
    border-top: 1px solid #111; 
    border-bottom: 1px solid #fff; 
    background: #fff; 
    -webkit-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.6); 
    box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.6); 
} 

.cat img{ 
    position: absolute; 
    border: none; 
    width: 138px; 
    height: 138px; 
    top: -8px; 
    left: -8px; 
    cursor: pointer; 
} 

fiddle

Answer 1

什麼版本的Safari瀏覽器，你有工作嗎？

幾個（不滿意）對於這個問題的解釋： How to make CSS3 rounded corners hide overflow in Chrome/Opera

您取出內容流的<img />與position:absolute;。 通過這樣做，您還應該將其顯示屬性更改爲阻止。那麼也可以在img上加上邊界半徑。

見http://jsfiddle.net/Volker_E/LgYrz/
注：很老的Webkits（Safari瀏覽器< 5.0）-webkit-border-radius is necessary

Answer 2

解決這個問題的最好辦法是由父元素上指定overflow: hidden;。

Answer 3

另一個簡單的解決方法是將border-radius屬性也添加到img標記中，併爲其賦予相同的值。

順便說一句，你可以使用包含-I還沒有測試過它的圖像HTML5 figure標籤超過一段時間，但我最後一次做那件事仍需要一個較舊的Firefox雙border-radius解決方法一對夫婦的瀏覽器。