在这个示例网站上实现略微圆角的最简单方法是什么?

时间:2010-09-17 16:02:23

标签: jquery html css rounded-corners

我必须实现一个与样式相同的选项卡控件:

http://funds.ft.com

这是我到目前为止提出的例子:

http://jsfiddle.net/MZUQK/

我面临的最大问题是第一个问题是第一个问题是“圆角”,它是由用于开发网站的ASP.NET AJAX自动实现的。

由于我没有使用ASP.NET AJAX,我有一种简单的方法可以实现与IE6和真实浏览器相同的效果吗?是通过jQuery或CSS执行此操作的最佳方法吗?

编辑:如果在没有图片的情况下无法在IE6中获得圆角,那么在其他浏览器中执行此操作的最佳方法是什么?

4 个答案:

答案 0 :(得分:3)

我喜欢jQuery Corner插件。它适用于IE7和IE8兼容IE7兼容模式。当然,IE6忽略了它。它非常轻巧,只需为角落加载jQuery-UI。

$('#yourDiv').corner();

答案 1 :(得分:1)

到目前为止,我发现最简单的方法是使用Jquery UI进行圆角处理。

就像包含两个文件并将其添加到类声明一样简单:

<element class="ui-corner-all myclass">(围绕元素的所有角落)

<element class="ui-corner-tl ui-corner-tr myclass">(左上角,右上角)

IE默认情况下不是圆角友好的,因此要完全复制用户体验,您必须抛出Jquery或其他替换脚本。我的大企业客户一致同意不值得努力 - 因为它优雅地降级到方角,IE用户将不得不处理它 - 他们首先选择使用劣质浏览器。

排在第二位的是边缘半径选项(http://www.css3.info/preview/rounded-border/),但需要担心的语法更多。使用Jquery UI还可以打开很多功能,例如自动完成,选项卡,按钮(标准HTML按钮的改进)等。

答案 2 :(得分:0)

要在IE 6中使用圆角,您必须使用图像

答案 3 :(得分:0)

这是一个很好的例子,使用JavaScript创建圆角:

Nifty Corners: http://www.html.it/articoli/niftycube/nifty1.html

使用Canvas元素(即使在IE中): http://www.netzgesta.de/corner