使用JQuery插件修饰窗口边角(jQuery Corner Demo)

使用JQuery插件修饰窗口边角(jQuery Corner Demo)

感谢 Mike Alsup!

原文

下载脚本

不错的边角效果

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, tl, tr, bl, br 定义边角的样式

Top Bevel

$(this).corner("bevel top");

Top-Left Bite

$(this).corner("bite tl");

Round Bottom

$(this).corner("bottom");

Bottom-Left Notch

$(this).corner("notch bl");

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");

混合效果

Chain corner calls to achieve combined effects

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");

更有意思的东西

Interesting Side Effects

Left Half of Arrow

$(this).corner("sharp tr br 20px");

Right Half of Arrow

$(this).corner("sharp tl bl 20px");

吕的部落格更多关于Jquery介绍