CSS带有圆角的问题

时间:2011-07-31 11:40:09

标签: css

我一直试图创建一种图像幻灯片。问题是在Firefox中它正确显示  圆角,但在铬圆角(使用css3)被隐藏在后面,虽然它在那里。 这是我的工作演示: http://anisa.me/work/ 任何帮助都将受到高度赞赏。

2 个答案:

答案 0 :(得分:2)

我成功地使用jQuery实现了你想要的东西......

首先正确加载jQuery(当前未加载)并添加此css规则

#bi-max { border-radius: 0 0 0 10px; }

然后使用JavaScript:

$('#bi-max').css("background","url("+jQuery("#bi-max img").attr('src')+")");
$('#bi-max img').css("opacity","0")

这样大图像容器的背景变得像大图像一样......边框半径隐藏其余部分。

然后我们将A元素的背景设置为它们包含的图像

$('#bi-min a').each(function(){
    jQuery(this).css("background","url("+jQuery(this).find("img").attr("src")+")");
})
$('#bi-min a img').css("opacity","0");

然后我们使用jQuery将圆角设置为最后一个A元素的右下角。

$('#bi-min a:last').css("border-radius","0 0 10px 0")

如果您发现难以遵循,可以将其发布到jsfiddle。

Here it is working on Chrome

此致

答案 1 :(得分:1)

你的问题不太对劲。听起来应该是“为什么FF会正确显示圆角图像?” :) FF是唯一支持它的人。

可能的解决方案:

  1. 如果图像具有固定大小,您可以插入一些大小相同的html元素(span或div),并将图像作为此元素的背景。然后必须隐藏图像。 例如:http://arsen.ws/folio/craft-design/cosmic-games.html

  2. 将角落保存为单独的图像,并将每个角落放置在图像的适当角落上方。

  3. 使用JS库圆角http://www.netzgesta.de/corner/