文章导航：

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

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

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

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

先看看最终效果截图：

图一

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

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

出处：蓝色理想
责任编辑：bluehearts

上一页 下一页 CSS圆角框组件 V1.0 [2]