为 IE7、IE8 增加圆角支持的 jQuery 插件：jQuery Corner

圆角在网页设计中比较常见，但是却让前端很苦恼。在过去的时候，做一个圆角效果往往需要将圆角图片切出，然后通过背景等实现效果。而在现在，CSS3 中有一个 border-radius 属性即可生成各种尺寸的圆角，十分强大，于是大家都开始使用 border-radius 的方式做圆角。

但是在国内早期 IE 浏览器仍然盛行的时期，为了考虑到大多数用户，我们不得不通过一些插件之类的来实现圆角，jQuery Corner 就是这样一个插件，使用这个插件配置一下圆角半径等参数，即可生成圆角同时兼容各种早期 IE 浏览器。

另外我们还可以看一下 jQuery Corner 插件的演示 ，它不仅仅支持生成各种圆角，同时还可以生成一些其他奇怪的“角”，虽然不是很实用，但万一有时候就用上了呢

如果你的项目中，需要圆角，同时还需要兼容早期 IE 浏览器，不妨来试用一下吧，下载：jQuery Corner 。

使用方法:

$(tihs).corner(option):为this元素指定特殊的边角

参数option为配置字符串,可选,格式为"模式"位置 大小 颜色 ,每一部分也是可选的

$(this).uncorner();为this元素取消所有边角设置,恢复矩形边框

下载:

可以点击这里下载 ，也可以访问其官方网站http://www.malsup.com/jquery/corner/ 。

示例:

本页所有示例均可以从这里看到效果：http://www.malsup.com/jquery/corner/

指定边角位置:

round 30px  ：$(this).corner(30px);

cool 20px:$(this).corner("cool 20px");

混合使用:

round和bevel：$(this).corner("bottom").corner("top bevel");

装饰使用:

Round:$(this).corner("round 8px").parent().css("padding","4px").corner("round 10px");

配置颜色:

默认情况下，边角使用透明和父元素的背景颜色。当然也可以指定其他的颜色，方法是在corner函数参数的颜色位置使用以下字符串：

边角颜色：cc:#xxx
div条颜色：sc:#xxx
显示边框：keep

例如:

.有颜色的边角:$(this).corner("cc:#009");

.有颜色的div条:$(this).corner("sc:#009");

使用Metadata

使用Metadata(元数据)，可以代替corner函数的参数来指定样式，如：

<div class="myCorner" data-corner="left 20px">metadata Example</div>

使用脚本

 $(".myCorner").corner();