CSS如何实现V1.0版本的圆角框组件设计？

本文共计1849个文字，预计阅读时间需要8分钟。

创新：极地高峰 + 转载请注意出处 + 2009年12月11日 17:29:27 + 文章导航： + 第一章：基本的圆形框架 + 第二章：透明圆形化背景图 + 第三章：圆形化图片 + 第四章：CSS圆形框架组件 V1.0 + 前序： + 前三篇

---

原创：冰极峰 转载请注明出处 2009年12月11日8:29:27

---

文章导航：

第一章：基本的圆角框

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

第三章：圆角化图片

第四章：CSS圆角框组件 V1.0

---

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

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

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