可实现六种圆角风格的CSS圆角框组件

一、组件优缺点

 组件优点：

• 全面兼容所有浏览器。
• 圆角不需要图片，直接代码生成，省去制图的麻烦。
• 自适应外框的大小，可广泛应用于布局区块中。
• 封装难以控制的CSS代码，调用灵活方便。
• 封装HTML结构，你只需定义你想要的结构，无冗余，更语义化。

组件缺点：

• 不能定义线框的大小。如果你需要改变线框大小，本组件不适合你。
• 圆角不够圆滑，如果你对圆角图片的精度要求较高，不宜采用本组件。
• 线框颜色和背景色不宜采用对比太强烈的颜色，容易看出锯齿。

本模型在以下浏览器中完美通过：

IE5.5、IE6、IE7、IE8、FF3、TT、Maxthon2.1.5、Opera9.6、Safari4.0、Chrome2.0。

二、调用方法

第一种：纯线框圆角

这是最基本，也是应用最广泛的一种应用。只需一句话就可以了。

Js行为：

b_RoundCurve("bottom","#F8B3D0","#FFF5FA",1);//普通圆角框

解释：四个参数，分别代表样式名称、边框色值、背景色值、风格参数。

Html结构：

<div class="bottom"></div> 

第二种：标题线框圆角

一般这种块状布局，都需要在页头加入标题，你可以使用h1~h6系列标签。

Js行为：

b_RoundCurve("right2","orange","",3,"h3");//标题和内容区都透明 

解释：五个参数，分别代表样式名称、边框色值、背景色值、风格参数、标题标签名称，
因为考虑了扩展性，当想使用其它的标签时，可以随时替换，如h1~h6系列标签。

Html结构：

<div class="right2">
   <h3>标题</h3>
   <div>内容</div>
</div>

第三种：标题和内容区可分别自定义颜色圆角

与第二种风格差不多，差别在于可以分别定义标题和内容区的颜色值。

Js行为：

b_RoundCurve("right1","#863313","#84D4CA",3,"h3","#BAB556");//标题只用纯色背景 

解释：六个参数，分别代表样式名称、边框色值、背景色值、风格参数、标题标签名称、标题背景色值。

Html结构：

<div class="right1">
  <h3>标题</h3>
  <div>内容</div>
</div>

第四种：标题背景图片圆角

这种需要将标题的背景图片路径作为参数传入，有了背景图片，一般都不需要背景颜色了，所以将第六个参数值设为空：

Js行为：

b_RoundCurve("right3","#A0C044","#E9F2CC",3,"h3","","image/bg1.gif");//标题用背景图片  

解释：七个参数，分别代表样式名称、边框色值、背景色值、风格参数、标题标签名称、标题背景色值、标题背景图片路径。

Html结构：

<div class="right3">
  <h3>标题</h3>
  <div>内容</div>
</div> 

第五种：装饰性背景图片圆角

这种圆角也是用得比较多的，这种风格要注意：在CSS中需要设置容器的宽高值，因为在js中会查找到这个图片的宽高值。

Js行为：

b_RoundCurve("rightbgimg","#F38E1A","",4);//圆角背景图片 解释：四个参数，分别代表样式名称、边框色值、背景色值、风格参数。背景色值和背景图片

只选其一，所以将第三个参数置为空。

Html结构：

<div class=" rightbgimg "></div> 第六种：Img图片圆角 

纯CSS方法是无法做到Img图片圆角的，但有JS的加入，就可以变相实现。原理和第五种相似，只是将这个Img的图片路径取出来，在js中以背景图片的方式加入到各个容器中去，然后再还原img标签。

Js行为：

b_RoundCurve("img","#999","#FFF5FA",2);//圆角IMG图片 解释：四个参数，分别代表样式名称、边框色值、背景色值、风格参数。

Html结构：

最简洁的HTML结构，无冗余代码。

<div class="img">
  <a href="http://www.5icool.org/" title="漂亮女孩1" target="_blank">
    <img src="image/girl-1.jpg" height="115" width="154" alt="漂亮女孩1"/>
  </a>
</div>