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边框的圆角

回答

相关问题