前序导航：

第一章：基本的圆 角框

第二章：透明圆角化背景图片

第三章：圆角化图片

前序：本来前三篇文章已经将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行为：

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

Html结构：

第二种：标题线框圆角

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

Js行为：