Auto-Ready!
一、可用的模式
默认的圆角样式表现round
Round
$(this).corner();
Bevel
$(this).corner("bevel");
Notch
$(this).corner("notch");
Bite
$(this).corner("bite");
Cool
$(this).corner("cool");
Sharp
$(this).corner("sharp");
Slide
$(this).corner("slide");
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");
二、选择你的那个角
使用top, bottom, left, right, tl, tr, bl, br 指定上下左右到底哪个角有样式
Top Bevel
$(this).corner("bevel top");
Top-Left Bite
$(this).corner("bite tl");
Round Bottom
$(this).corner("bottom");
Left Notch
$(this).corner("notch left");
Top-Right Dog Ear
$(this).corner("dog tr");
Top-Left, Bottom-Right Cool
$(this).corner("cool tl br");
三、特定的大小
可以使用px为单位的值来指定圆角的大小
Round 30px
$(this).corner("30px");
Round 5px
$(this).corner("5px");
Cool 20px
$(this).corner("cool 20px");
Sharp 20px
$(this).corner("sharp 20px");
Bite 30px
$(this).corner("bite 30px");
Wicked 20px
$(this).corner("wicked 20px");
Dog 20px
$(this).corner("dog 20px");
Dog2 30px
$(this).corner("dog2 30px");
Dog3 30px
$(this).corner("dog3 30px");
四、混合及匹配
使用corner链实现效果的合并
Round and Bevel
$(this).corner( "bottom").corner("top bevel");
Round and Notch
$(this).corner( "br top").corner("notch bl 20px");
Crazy
$(this).corner("jut tl 20px").corner("dog tr 20px").corner("bite bl 15px").corner("notch br");
五、装饰
使用嵌套的圆角元素实现效果(多亏了Kevin Scholl)
Round
$(this).corner("round 8px").parent().css('padding', '4px').corner("round 10px")
Round
$(this).corner("round 8px").parent().css('padding', '8px').corner("round 14px")
Round
$(this).corner("round 14px").parent().css('padding', '15px').corner("round 14px")
Bevel
$(this).corner("bevel 8px").parent().css('padding', '5px').corner("bevel 10px")
Bevel
$(this).corner("bevel 8px").parent().css('padding', '10px').corner("bevel 14px")
Bite
$(this).corner("bite 10px").parent().css('padding', '8px').corner("bite 10px")
Bite
$(this).corner("bite 20px").parent().css('padding', '15px').corner("bite 20px")
Fray
$(this).corner("fray 10px").parent().css('padding', '10px').corner("fray 10px")
Tear
$(this).corner("tear 20px").parent().css('padding', '15px').corner("tear 20px")
Notch
$(this).corner("notch 4px").parent().css('padding', '4px').corner("notch 4px")
Notch
$(this).corner("notch 10px").parent().css('padding', '12px').corner("notch 10px")
Sharp
$(this).corner("sharp 10px").parent().css('padding', '8px').corner("sharp 10px")
Cool
$(this).corner("cool 20px").parent().css('padding', '10px').corner("cool 10px")
Bite/Round
$(this).corner("round 20px").parent().css('padding', '8px').corner("bite 10px")
Round/Bite
$(this).corner("bite 15px").parent().css('padding', '8px').corner("round 10px")
Fray/Tear
$(this).corner("tear 20px").parent().css('padding', '8px').corner("fray 10px")
Jut/Sculpt
$(this).corner("sculpt 20px").parent().css('padding', '8px').corner("jut 10px")
Bevel/Notch
$(this).corner("notch 20px").parent().css('padding', '8px').corner("bevel 15px")
Notch/Bite
$(this).corner("bite 15px").parent().css('padding', '10px').corner("notch 10px")
Bite/Notch
$(this).corner("notch 15px").parent().css('padding', '15px').corner("bite 20px")
Curl/Long
$(this).corner("long 15px").parent().css('padding', '15px').corner("curl 15px")
六、选取您自己的颜色(或是保留您的边框)
默认情况下，角背景是透明的，内容背景使用的是父元素留下的背景色。如果这些不是您想要的，您可以执行您希望的颜色。
corner color: cc:#xxx
strip color: sc:#xxx
keep borders: keep
normal corners
$(this).corner();
colored corners
$(this).corner("cc:#34538b");
colored strips
$(this).corner("sc:#34538b");
"keep" border
$(this).corner("keep");
cc:#34538b notch
$(this).corner("cc:#34538b notch");
cc:#34538b keep notch
$(this).corner("keep notch cc:#34538b");
cc:#34538b keep bite
$(this).corner("bite keep 15px cc:#34538b");
cc:#34538b cool keep
$(this).corner("cc:#34538b cool keep 20px");
七、有趣的填充
有趣的边缘填充效果
左半边
$(this).corner("sharp tr br 20px");
右半边
$(this).corner("sharp tl bl 20px");
八、固定的还是流动的？都没问题！
下面的div标签们的高度或宽度要么固定，要么流动的(自适应)，自由搭配。
高度: 自适应
宽度: 自适应
网站新首页已于2010-01-06 零点十分上线了。全是自己设计开发的，欢迎测试，欢迎提建议。
高度: 固定
宽度: 自适应
网站新首页已于2010-01-06 零点十分上线了。全是自己设计开发的，欢迎测试，欢迎提建议。注册后还有用户应用系统，开发的几个简单的功能，欢迎注册，欢迎使用。
高度: 自适应
宽度: 固定
网站新首页已于2010-01-06 零点十分上线了。全是自己设计开发的，欢迎测试，欢迎提建议。注册后还有用户应用系统，开发的几个简单的功能，欢迎注册，欢迎使用。
注册地址：/php/regist.php
高度: 固定
宽度: 固定
网站新首页已于2010-01-06 零点十分上线了。全是自己设计开发的，欢迎测试，欢迎提建议。注册后还有用户应用系统，开发的几个简单的功能，欢迎注册，欢迎使用。
九、普通的样式
下面的div用以测试只有样式显示的内容自适应的元素的表现。
圆角
这是一个有 30px padding样式的普通div
圆角
这是一个有 0px padding样式的普通div
圆角
这个普通的div 有一个 30px padding 和 30px margin的样式
去除圆角
下面显示的是动态的改变元素为圆角或不是圆角
// 使用的脚本
...
$('#dynamic').corner();
...
$('#dynamic').uncorner();
圆角 无圆角
无圆角演示
此div的id是#dynamic
十、使用元数据标记代替参数选项
下面示例演示了如果将corner参数用自定义的元数据标记代替。corner
// 标记
// 脚本 - corner函数没有任何参数
$('.myCorner').corner();
元数据实例
