偶看新闻铲车防滑链安装图解:CSS圆角框组件 V1.0
来源：百度文库 编辑：偶看新闻 时间：2024/04/29 02:47:54
前序：本来前三篇文章已经将CSS圆角框讲解完毕，但从网友反馈中，都说到不好使用，因此有了这篇文章，本文主要是将前面的结果总结修订后进行JS封装，方便调用。
在本次封装中，增加了对真正img标签引用的图片实现圆角化，之前的圆角图片大多是基于背景图片的，因为纯css无法实现img图片的圆角，有了js的加入，就变成可能了。并且在这次封装过程中修正了上次的背景图片下面两个圆角图片的定位错误问题。
其实这个控件的JS代码很简单，只需要用到innerHTML就可以完成其大部分工作，而真正的难点在于对于CSS样式的合并组合使用。
先看看最终效果截图：
图一
在我的《CSS圆角框组件V1.0》中，可以变化出6种基本风格的圆角框（至于颜色风格，则可以说是千变万化了）。它们分别是：
1. 纯线框圆角。
2. 标题线框圆角。不带背景色或背景图片，透明。
3. 标题和内容区可分别自定义颜色圆角。
4. 标题背景图片圆角。标题带背景图片时，自动实现圆角。
5. 装饰性背景图片圆角。容器有装饰性背景图片时，自动实现圆角。
6. Img图片圆角。如果有img标签引用图片时，自动实现圆角。
js代码就不用详解了，都很简单，我在js中作了详细的注释说明，一看就会。下面说说这6种风格的调用方法：
第一种：纯线框圆角
这是最基本，也是应用最广泛的一种应用。只需一句话就可以了。
Js行为：
b_RoundCurve("bottom","#F8B3D0","#FFF5FA",1);//普通圆角框解释：四个参数，分别代表样式名称、边框色值、背景色值、风格参数。
Html结构：
第二种：标题线框圆角
一般这种块状布局，都需要在页头加入标题，你可以使用h1~h6系列标签。
Js行为：
b_RoundCurve("right2","orange","",3,"h3");//标题和内容区都透明解释：五个参数，分别代表样式名称、边框色值、背景色值、风格参数、标题标签名称，因为考虑了扩展性，当想使用其它的标签时，可以随时替换，如h1~h6系列标签。
Html结构：
标题
第三种：标题和内容区可分别自定义颜色圆角
与第二种风格差不多，差别在于可以分别定义标题和内容区的颜色值。
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结构：