在Safari/Chrome中使用邊框半徑屬性的圖像邊角沒有正確格式化

在我的主頁上使用JQuery的fadeIn和fadeOut方法循環播放一些圖像。在Safari/Chrome中使用邊框半徑屬性的圖像邊角沒有正確格式化

圖像的邊框爲2px，半徑爲14px。

正如您所看到的，圖像的邊角與邊框重疊。

此行爲僅發生在Safari和Chrome中，不在Firefox和IE中。

任何人有任何想法，爲什麼？

你可以看到這種行爲在這裏：

http://www.findyourgeek.com/index-copy.php

感謝。

來源

2011-08-11 Tom

支持border-radius上使用Chrome/Safari瀏覽器（或相當的Webkit）圖像似乎有點馬車

Chrome -webkit-border-radius bug? - CSS-Tricks Forums

上述職位是從今年早些時候（〜Chrome的版本10）時，支持圖像上的border-radius無法正常工作。支持是可用的，但就像你看到它仍然有一些問題。您可能想要向Webkit/Chrome/Safari項目報告您遇到的錯誤。我知道有一個很容易找到Chromium的錯誤報告頁面，不知道其他兩個。

下面是解決方法兩個思路：

您可以通過刪除的2px border和設置2px的行程box-shadow（box-shadow:0 0 0 2px #606060;）申請不大不小的CSS3黑客攻擊。這有幾個缺點，因爲它是唯一適用於Chrome/Safari瀏覽器example jsfiddle
或課程的修復程序的另一種選擇是編輯照片給他們圓角（http://www.roundpic.com/是一個很好的網站）

來源

2011-08-11 18:51:03 MikeM

嘗試去除圖像本身邊框造型，並加入它＃內容#topStoriesTest

#content #topStoriesTest { 

    border: 1px solid #CCCCCC; 
    border-radius: 14px; 
    -webkit-border-radius: 14px; 
    -moz-border-radius: 14px; 
    height: 318px; 
    overflow: hidden; 
    position: relative; 
    width: 549px; 
}

來源

2011-08-11 18:55:42

在Safari/Chrome中使用邊框半徑屬性的圖像邊角沒有正確格式化

回答

相關問題