自写的一个jQuery圆角插件

原理是利用1px的div，具体实现看代码。
使用方法：
复制代码代码如下:
$（".test"）.rounder（）;

这样会根据默认的设置产生一个圆角框，效果如图：

圆角处会有点锯齿:（
如果仅此而已，那肯定是不够的。我们会想加上自己的一个样式该怎么办？使用方法：
复制代码代码如下:
$（".test"）.rounder（{borderColor:"red",backgroundColor:"#EEE",color:"blue"}）;

效果如图：

接下来我就来讲讲实现过程了，先附上jQuery代码如下：
复制代码代码如下:
（function（$）{
$.fn.rounder=function（options）{
var setting=$.extend（{backgroundColor:"#FFF",borderColor:"#AAA",color:"#000"},options||{}）;
this.each（function（）{
var source=$（this）;
var container=source.parents（".mapping_rounder"）;
if（container.size（）<=0）{
container=$（"<div class="mapping_rounder"></div>"）;
source.before（container）;
//添加1pxDIV
container.append（"<div class="rounder_px3"></div><div class="rounder_px2"></div><div class="rounder_px1"></div><div class="rounder_px0"></div><div class="rounder_content"></div><div class="rounder_px0"></div><div class="rounder_px1"></div><div class="rounder_px2"></div><div class="rounder_px3"></div>"）;
container.find（".rounder_content"）.append（source）;
//保持原有的形态，如：高度、宽度等
container.width（source.width（））;
source.width（source.width（）-12）;
container.height（source.height（））;
source.height（source.height（）-8）;
source.css（"lineHeight",source.height（）+"px"）;
container.css（"marginTop",source.css（"marginTop"））;
source.css（"marginTop",0）;
container.css（"marginBottom",source.css（"marginBottom"））;
source.css（"marginBottom",0）;
container.css（"marginLeft",source.css（"marginLeft"））;
source.css（"marginLeft",0）;
container.css（"marginRight",source.css（"marginRight"））;
source.css（"marginRight",0）;
}
//给1pxDIV添加样式以产生圆角边框的效果
container.find（".rounder_px3"）.css（"backgroundColor",setting.borderColor）;
container.find（".rounder_px2"）.css（{borderColor:setting.borderColor,backgroundColor:setting.backgroundColor}）;
container.find（".rounder_px1"）.css（{borderColor:setting.borderColor,backgroundColor:setting.backgroundColor}）;
container.find（".rounder_px0"）.css（{borderColor:setting.borderColor,backgroundColor:setting.backgroundColor}）;
container.find（".rounder_content"）.css（{borderColor:setting.borderColor,backgroundColor:setting.backgroundColor}）;
//去除原有的样式
source.css（"borderStyle","none"）;
source.css（"backgroundColor",setting.backgroundColor）;
source.css（"color",setting.color）;
}）;
}
}）（jQuery）;

CSS文件代码：
复制代码代码如下:
.rounder_content{padding:0 5px;border-left:1px solid;border-right:1px solid;}
.rounder_px0{margin:0;height:2px;border-left:2px solid;border-right:2px solid;overflow:hidden;}
.rounder_px1{margin:0 1px;height:1px;border-left:2px solid;border-right:2px solid;overflow:hidden;}
.rounder_px2{margin:0 2px;height:1px;border-left:3px solid;border-right:3px solid;overflow: hidden;}
.rounder_px3{margin:0 3px;height:1px;background:#AAA;overflow:hidden;}

本来这个CSS文件的样式都可以用jQuery加上去，但那样会多很多代码，且让我在此偷下懒- -|||。样式里面加上overflow:hidden;的目的是为了兼容IE6，因为在IE6里面DIV会有个默认的最小高度，好像是13px。
功能非常简单，但可以应用到我们常见的应用中，如下：
复制代码代码如下:
<script type="text/javascript">
$（document）.ready（function（）{
$（".test"）.rounder（{borderColor:"#AAA",color:"#000"}）;
$（".test"）.focus（function（event）{$（event.target）.rounder（{borderColor:"red",backgroundColor:"#EEE",color:"blue"}）;}）;
$（".test"）.blur（function（event）{$（event.target）.rounder（{borderColor:"#AAA",color:"#000"}）;}）;
}）;
</script>

即文本框加上圆角，获取焦点时呈现一种样式，失去焦点时再呈现另一种样式。

当然，我们可以通过和jQuery本身强大的功能结合来满足不同的需求。

优点：

体积小，两个文件经过压缩后只有2.23kb
简单易用
不足：

边框弧度和线条的粗细不能调节（如果需要请参考jquery.corner插件）
高度和字符大小配合的不是很好，有时字符会被遮住一半
测试通过IE6、FF、Opera、Safari、Chrome