Question

这不是一个真正的问题，只是我自己挣扎的事情，并认为其他人可能会喜欢解决方案。

如果您尝试将边框和圆角边框半径应用于包含FireFox中图像的div，则会得到圆角div边框，边角处会出现方形图像 - 相当难看。

解？

像往常一样将所需的边框应用于css中的div。
将一个类应用于div（为了处理多个图像：您可以使用id）。
使用jQuery获取包含img的src属性。
将div背景设置为上述src值。
应用边框半径。
隐藏img本身以显示其背后的背景。

和瓦拉：

$('.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的新类。

Answer 1

如果你对javascript禁用太具体了。唯一的选择是CSS。

<强> CSS

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

 }

Answer 2

在Firefox 4中，只需使用：

即可在img上获得圆角边框

img { border-radius: 15px }

在FF的边框上的圆角

2 个答案: