CSS圆角框组件V1.0

superadmin · 发表于 2009-12-31 10:23:41

文章导航：

第一章：基本的圆角框

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

第三章：圆角化图片

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

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

在本次封装中，增加了对真正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>

superadmin · 发表于 2009-12-31 10:24:16

第四种：标题背景图片圆角

这种需要将标题的背景图片路径作为参数传入，有了背景图片，一般都不需要背景颜色了，所以将第六个参数值设为空：

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。

		自动登录	找回密码
密码			注册

全国各地医院查询	重量转换换算	RGB颜色查询	交通标志大全	各类快递查询
简体繁体转换	黄金价格实时走势	万年历查询	实时汇率转换	列车时刻查询
在线翻译工具	CSS中文手册	HTML学习教程	MySQL中文手册	JavaScript中文手册
PHP安全基础手册	PHP5面向对象编程教程	正则表达式系统教程	SQL Server精华	Apache 2.2 中文手册
DOS命令全集指南	windows脚本技术中文版	股票行情查询	历史上的今天	邮编区号查询
长度转换换算	货币汇率转换	常用电话号码	体育彩票查询	手机位置查询
域名Whois信息查询	谷歌PR值查询	台州网站建设	台州网站开发	台州域名注册
天气预报查询	长度转换换算器	在线电子地图	车牌号码查询	中国百家姓查询

CSS圆角框组件V1.0

CSS圆角框组件V1.0

本帖子中包含更多资源