CSS圆角框进行JS封装

武林网(www.vevb.com)文章简介：本来前三篇文章已经将CSS圆角框讲解完毕，但从网友反馈中，都说到不好使用，因此有了这篇文章，本文主要是将前面的结果总结修订后进行JS封装，方便调用。

前序：本来前三篇文章已经将CSS圆角框讲解完毕，但从网友反馈中，都说到不好使用，因此有了这篇文章，本文主要是将前面的结果总结修订后进行JS封装，方便调用。

在本次封装中，增加了对真正img标签引用的图片实现圆角化，之前的圆角图片大多是基于背景图片的，因为纯css无法实现img图片的圆角，有了js的加入，就变成可能了。并且在这次封装过程中修正了上次的背景图片下面两个圆角图片的定位错误问题。

其实这个控件的JS代码很简单，只需要用到innerHTML就可以完成其大部分工作，而真正的难点在于对于CSS样式的合并组合使用。

先看看最终效果截图：

图一

在我的《CSS圆角框组件V1.0》中，可以变化出6种基本风格的圆角框（至于颜色风格，则可以说是千变万化了）。它们分别是：