img帶有FF邊框的圓角

這不是一個真正的問題，只是我自己努力的方式，並認爲其他人可能會喜歡解決方案。img帶有FF邊框的圓角

如果您嘗試將邊框和圓角邊框半徑應用於包含FireFox中圖像的div，則會在圓角處出現四邊形的圓角邊框 - 顯得非常難看。

解決方案？

像往常一樣將所需的邊框應用於CSS中的div。
向div應用一個類（爲了處理多個圖像：你可以使用一個id來代替）。
使用jQuery獲取包含的img的src屬性。
將div背景設置爲上述src值。
應用邊界半徑。
隱藏img本身以揭示它背後的背景。

而且wallah：

$('.imgDiv').each(function(){ 
    var imgSrc = $(this).children().attr('src'); 
    var imgBg = 'url(' + imgSrc + ')'; 
    $(this).css('background-image', '' + imgBg + '').css('-webkit-border-radius','15px').css('border-radius','15px').css('-moz-border-radius','15px'); 
    $(this).children().hide(); 
});

現在的形象將出現帶有圓角和邊框。在禁用JavaScript的情況下，用戶仍然可以看到帶有邊框的圖像，儘管是完全正方形的。而HTML中唯一需要的標記是應用於div的新類。

來源

2010-10-11 tcmulder

感謝試圖分享，我敢肯定，人人都喜歡它，但不幸的是，這不是博客或論壇，而是問答 – 2010-10-11 23:35:35

如果你對JavaScript禁用過於具體。唯一的選擇是CSS。

CSS

.imgDiv { 
    -webkit-border-radius : 15px; 
    border-radius : 15px; 
    -moz-border-radius : 15px; 

}

來源

2010-10-11 23:40:09

在Firefox 4中，您將得到圓角邊框上的IMG與剛：

img { border-radius: 15px }

來源

2010-10-12 05:36:04

img帶有FF邊框的圓角

回答

相關問題