jquery 做圆角

jQuery 圆角插件jquery.corner.js demo页面

1. 此插件最初由 Dave Methvin书写。
2. 此插件demo页面由 张鑫旭翻译并编辑，要查看原demo页面请点 这里。
3. 此插件后经过几次的改进，目前此项目放在 github上。
4. 当前最新版本的插件js下载： jquery.corner.js

绝对定位

此插件的圆角是通过添加HTML元素实现的（通过1像素高度的div水平线拼合成），理解这个很重要。尤其是，添加了"strips（特性）"的div，被设置为圆角和实色背景的元素这类特性的元素的效果是通过覆盖真实的圆角实现的（实际点讲，就是内部在添加div块，为圆角含背景色，然后通过margin负值定位或relative定位覆盖外标签的圆角背景色）。此插件比较适合于block水平的元素，如果要将inline属性的元素(span,a等)也圆角化可能有麻烦。

最近我添加了CSS3中含有的圆角属性 border-radius主要针对对其支持的浏览器(Firefox, Safari, and Chrome)。所以在这些浏览器下，最规范的圆角是通过border-radius实现的。对于IE浏览器，我们要等到IE9出来。

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