jQuery Corner：圆角矩形原来如此简单[zT]
译自：http://www.malsup.com/jquery/corner/
简介
jQuery Corner plugin是由Dave Methvin 和Malsup 合 作开发的jQuery插件，用于创建非直角的边框。
它利用给页面添加了很多的元素来实现其功能。尤其是，它给要改变边角的元素添加一条条的div，然后为其设置实心的背景颜色用于隐藏真实的边角和元 素。因此，当你回过头来查看被改变边角的元素时，要考虑到这些实心的div隐藏了你要改变的真实的矩形元素。这会让你理解这个插件固有的限制，也就是说这 个插件适于为块级元素（如div、p等）创建圆角或其他类型的边角，对于内联元素（如span、a），这样的改变或许将充满更多的挑战。
最近，作者为支持圆角矩形的浏览器（如Opera 10.5+、Firefox、Safiri和Chrome）添加了原生的支持。这样在这些浏览器中这个插件可以简单地使用CSS属性来创建圆角。但是在 IE中，只好期待IE9的支持。对于所有的浏览器，如果要创建非圆角的边角模式，都需要使用许多div条的方式来实现。
使用方法
以this为例:
- $(this).corner(option); 为this元素指定特殊的边角
参数option为配置字符串，可选，格式为”模式 位置 大小 颜色”，每一部分也是可选的。 - $(this).uncorner(); 为this元素取消所有边角设置，恢复矩形边框
下载
可以点击这里下载 ，也可以访问其官方网站http://www.malsup.com/jquery/corner/ 。
示例
本页所有示例均可以从这里看到效果：http://www.malsup.com/jquery/corner/
可用边角样式
- Round：$(this).corner();
- Bevel：$(this).corner(“bevel”);
- Bite：$(this).corner(“bite”);
- Cool：$(this).corner(“cool”);
- Sharp：$(this).corner(“sharp”);
- Jut：$(this).corner(“jut”);
- Curl：$(this).corner(“curl”);
- Tear：$(this).corner(“tear”);
- Fray：$(this).corner(“fray”);
- Wicked：$(this).corner(“wicked”);
- Sculpt：$(this).corner(“sculpt”);
- Long：$(this).corner(“long”);
- Dog Ear：$(this).corner(“dog”);
- Dog2：$(this).corner(“dog2″);
- Dog3：$(this).corner(“dog3″);
- Dogfold（不支持渲染在quirksmode模式下的IE）：$(this).corner(“dogfold”);
- Bevelfold（不支持在非标准模式下渲染的IE8）：$(this).corner(“bevelfold”);
自定义边角位置
可以使用top（上边两个）、bottom（下边两个）、left（左侧两个）、right（右侧两个）、tl（左上角）、tr（右上角）、 bl（左下角）、br（右下角）来指定哪个（些）边角的改变样式，如：
- 上边是Bevel：$(this).corner(“bevel top”);
- 左上角是Bite：$(this).corner(“bite tl”);
- 底部是Round：$(this).corner(“bottom”);
- 左上角和右下角是Cool：$(this).corner(“cool tl br”);
指定边角大小
使用像素值来指定边角的大小，如：
- Round 30px：$(this).corner(“30px”);
- Cool 20px：$(this).corner(“cool 20px”);
混合使用
可以利用对同一个元素多次调用corner函数的方法来合并样式，如：
- Round 和 Bevel：$(this).corner( “bottom”).corner(“top bevel”);
- Round 和 Notch：$(this).corner( “br top”).corner(“notch bl 20px”);
- 更疯狂的：$(this).corner(“jut tl 20px”).corner(“dog tr 20px”).corner(“bite bl 15px”).corner(“notch br”);
装饰
可以使用嵌套的方式创建漂亮的非矩形边框，如：
- Round：$(this).corner(“round 8px”).parent().css(‘padding’, ‘4px’).corner(“round 10px”)
- Fray/Tear：$(this).corner(“tear 20px”).parent().css(‘padding’, ‘8px’).corner(“fray 10px”)
配置颜色
默认情况下，边角使用透明和父元素的背景颜色。当然也可以指定其他的颜色，方法是在corner函数参数的颜色位置使用以下字符串：
边角颜色：cc:#xxx
div条颜色：sc:#xxx
显示边框：keep
例如：
- 有颜色的边角：$(this).corner(“cc:#009″);
- 有颜色的div条：$(this).corner(“sc:#009″);
- cc:#009 keep bite：$(this).corner(“bite keep 15px cc:#009″);
使用Metadata
使用Metadata(元数据)，可以代替corner函数的参数来指定样式，如：
标记
- < div class = "myCorner" data-corner = "left 20px" > Metadata Example </ div >
<div class="myCorner" data-corner="left 20px">Metadata Example</div>脚本
- $( '.myCorner' ).corner();
$('.myCorner').corner();