兼容所有浏览器的CSS圆角框JS组件.docVIP

大家在网页设计的时候，为了页面效果更为美化会用到圆角框，大家一般情况下都会采取用图片堆砌做成圆角框效果，或是与CSS结合当作背景来体现。今天游览网页的时候无意中发现一款封装与JS里的CSS组件，可以轻松实现网页中圆角边框，下面就与大家一起来分享使用方法！ 组件名称《CSS圆角框组件V1.0》，该组件在此封装之前，作者做了很多实践和反馈收集，在该版本中增加了对真正img标签引用的图片实现圆角化，之前的圆角图片大多是基于背景图片的，因为纯css无法实现img图片的圆角，有了js的加入，就变成可能了。并且在这次封装过程中修正了上次的背景图片下面两个圆角图片的定位错误问题。 其实这个控件的JS代码很简单，只需要用到innerHTML就可以完成其大部分工作，而真正的难点在于对于CSS样式的合并组合使用。 先看看最终效果截图： 在这个《CSS圆角框组件V1.0》中，可以变化出6种基本风格的圆角框（至于颜色风格，则可以说是千变万化了）。它们分别是： 纯线框圆角。 标题线框圆角。不带背景色或背景图片，透明。 标题和内容区可分别自定义颜色圆角。 标题背景图片圆角。标题带背景图片时，自动实现圆角。 装饰性背景图片圆角。容器有装饰性背景图片时，自动实现圆角。 Img图片圆角。如果有img标签引用图片时，自动实现圆角。 js代码就不用详解了，都很简单，我在js中作了详细的注释说明，一看就会。下面说说这6种风格的调用方法： 第一种：纯线框圆角 这是最基本，也是应用最广泛的一种应用。只需一句话就可以了。 Js行为： b_RoundCurve(bottom,#F8B3D0,#FFF5FA,1);//普通圆角框 解释：四个参数，分别代表样式名称、边框色值、背景色值、风格参数。 Html结构： div class=bottom/div 第二种：标题线框圆角 一般这种块状布局，都需要在页头加入标题，你可以使用h1~h6系列标签。 Js行为： 以下为引用的内容： b_RoundCurve(right2,orange,,3,h3);//标题和内容区都透明 解释：五个参数，分别代表样式名称、边框色值、背景色值、风格参数、标题标签名称，因为考虑了扩展性，当想使用其它的标签时，可以随时替换，如h1~h6系列标签。 Html结构： 以下为引用的内容： div class=right2?? h3标题/h3?? div内容/div/div 第三种：标题和内容区可分别自定义颜色圆角 与第二种风格差不多，差别在于可以分别定义标题和内容区的颜色值。 Js行为： 以下为引用的内容： b_RoundCurve(right1,#863313,#84D4CA,3,h3,#BAB556);//标题只用纯色背景 解释：六个参数，分别代表样式名称、边框色值、背景色值、风格参数、标题标签名称、标题背景色值。 Html结构： 以下为引用的内容： div class=right1? h3标题/h3? div内容/div/div ? 第四种：标题背景图片圆角 这种需要将标题的背景图片路径作为参数传入，有了背景图片，一般都不需要背景颜色了，所以将第六个参数值设为空： Js行为： 以下为引用的内容： b_RoundCurve(right3,#A0C044,#E9F2CC,3,h3,,image/bg1.gif);//标题用背景图片 解释：七个参数，分别代表样式名称、边框色值、背景色值、风格参数、标题标签名称、标题背景色值、标题背景图片路径。 Html结构： 以下为引用的内容： div class=right3? h3标题/h3? div内容/div/div 第五种：装饰性背景图片圆角 这种圆角也是用得比较多的，这种风格要注意：在CSS中需要设置容器的宽高值，因为在js中会查找到这个图片的宽高值。 Js行为： 以下为引用的内容： b_RoundCurve(rightbgimg,#F38E1A,,4);//圆角背景图片 解释：四个参数，分别代表样式名称、边框色值、背景色值、风格参数。背景色值和背景图片 只选其一，所以将第三个参数置为空。 Html结构： 以下为引用的内容： div class= rightbgimg /div 第六种：Img图片圆角 纯CSS方法是无法做到Img图片圆角的，但有JS的加入，就可以变相实现。原理和第五种相似，只是将这个Img的图片路径取出来，在js中以背景图片的方式加入到各个容器中去，然后再还原img标签。 Js行为： 以下为引用的内容： b_RoundCurve(img,#999,#FFF5FA,2);//圆角IMG图片 解释：四个参数，分别代表样式名称、边框色值、背景色值、风格参数。 ? Html结构： 最简洁的HTML结构，无冗余代码