第四种:标题背景图片圆角
这种需要将标题的背景图片路径作为参数传入,有了背景图片,一般都不需要背景颜色了,所以将第六个参数值设为空:
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结构,无冗余代码。
<div class="img"> <a href="http://binyong.cnblogs.com/" title="漂亮女孩1" target="_blank"> <img src="image/girl-1.jpg" height="115" width="154" alt="漂亮女孩1"/> </a> </div>
组件优点:
- 全面兼容所有浏览器。
- 圆角不需要图片,直接代码生成,省去制图的麻烦。
- 自适应外框的大小,可广泛应用于布局区块中。
- 封装难以控制的CSS代码,调用灵活方便。
- 封装HTML结构,你只需定义你想要的结构,无冗余,更语义化。
组件缺点:
- 不能定义线框的大小。如果你需要改变线框大小,本组件不适合你。
- 圆角不够圆滑,如果你对圆角图片的精度要求较高,不宜采用本组件。
- 线框颜色和背景色不宜采用对比太强烈的颜色,容易看出锯齿。
本模型在以下浏览器中完美通过:
IE5.5、IE6、IE7、IE8、FF3、TT、Maxthon2.1.5、Opera9.6、Safari4.0、Chrome2.0。
点击这儿下载完整的压缩包:下载Demo
原文:http://www.cnblogs.com/binyong/archive/2009/12/11/1621484.html
本文链接:http://www.blueidea.com/download/product/2009/7308.asp
出处:蓝色理想
责任编辑:bluehearts
上一页 CSS圆角框组件 V1.0 [2] 下一页
|