CSS圆角框进行JS封装

• 第一章：基本的圆角框
• 第二章：透明圆角化背景图片
• 第三章：圆角化图片
• 第四章：CSS圆角框组件 V1.0

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

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

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

先看看最终效果截图：

图一

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

1. 纯线框圆角。
2. 标题线框圆角。不带背景色或背景图片，透明。
3. 标题和内容区可分别自定义颜色圆角。
4. 标题背景图片圆角。标题带背景图片时，自动实现圆角。
5. 装饰性背景图片圆角。容器有装饰性背景图片时，自动实现圆角。
6. Img图片圆角。如果有img标签引用图片时，自动实现圆角。

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!