CSS 圆角框进行JS封装版

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

Js行为：

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

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

Html结构：

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

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

Js行为：

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

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

Html结构：

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

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

Js行为：

b_RoundCurve(“rightbgimg”,”#F38E1A”,””,4);//圆角背景图片

解释：四个参数，分别代表样式名称、边框色值、背景色值、风格参数。背景色值和背景图片只选其一，所以将第三个参数置为空。

Html结构：

第六种：Img图片圆角

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

Js行为：

b_RoundCurve(“img”,”#999″,”#FFF5FA”,2);//圆角IMG图片

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

Html结构：

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

组件优点：

全面兼容所有浏览器。
圆角不需要图片，直接代码生成，省去制图的麻烦。
自适应外框的大小，可广泛应用于布局区块中。