css圆角样式:CSS圆角框组件 V1.0

来源: 发布时间:星期五, 2009年12月11日浏览:0次评论:0

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

文章导航:

第章:基本圆角框

第 2章:透明圆角化背景图片

第 3章:圆角化图片 第 4章:CSS圆角框组件 V1.0

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

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

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

先看看最终效果截图:

图

在我CSS圆角框组件V1.0中可以变化出6种基本风格圆角框(至于颜色风格则可以说是千变万化了)它们分别是:

1. 纯线框圆角

2. 标题线框圆角不带背景色或背景图片透明

3. 标题和内容区可分别自定义颜色圆角

4. 标题背景图片圆角标题带背景图片时自动实现圆角

5. 装饰性背景图片圆角容器有装饰性背景图片时自动实现圆角

6. Img图片圆角如果有img标签引用图片时自动实现圆角

js代码就不用详解了都很简单我在js中作了详细注释介绍说明看就会下面说说这6种风格思路方法:

第种:纯线框圆角

这是最基本也是应用最广泛种应用只需句话就可以了

Js行为:

b_RoundCurve("bottom","#F8B3D0","#FFF5FA",1);//普通圆角框

解释: 4个参数分别代表样式名称、边框色值、背景色值、风格参数

Html结构:

<div ="bottom"></div>

第 2种:标题线框圆角

般这种块状布局都需要在页头加入标题你可以使用h1~h6系列标签

Js行为:

b_RoundCurve("right2","orange","",3,"h3");//标题和内容区都透明

解释: 5个参数分别代表样式名称、边框色值、背景色值、风格参数、标题标签名称考虑了扩展性当想使用其它标签时可以随时替换如h1~h6系列标签

Html结构:

<div ="right2">
   <h3>标题</h3>
   <div>内容</div>
</div>

第 3种:标题和内容区可分别自定义颜色圆角

和第 2种风格差不多差别在于可以分别定义标题和内容区颜色值

Js行为:

b_RoundCurve("right1","#863313","#84D4CA",3,"h3","#BAB556");//标题只用纯色背景

解释: 6个参数分别代表样式名称、边框色值、背景色值、风格参数、标题标签名称、标题背景色值

Html结构:

<div ="right1">
  <h3>标题</h3>
  <div>内容</div>
</div>

第 4种:标题背景图片圆角

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

Js行为:

b_RoundCurve("right3","#A0C044","#E9F2CC",3,"h3","","image/bg1.g");//标题用背景图片

解释: 7个参数分别代表样式名称、边框色值、背景色值、风格参数、标题标签名称、标题背景色值、标题背景图片路径

Html结构:

<div ="right3">
  <h3>标题</h3>
  <div>内容</div>
</div>

第 5种:装饰性背景图片圆角

这种圆角也是用得比较多这种风格要注意:在CSS中需要设置容器宽高值在js中会查找到这个图片宽高值

Js行为:

b_RoundCurve("rightbgimg","#F38E1A","",4);//圆角背景图片

解释: 4个参数分别代表样式名称、边框色值、背景色值、风格参数背景色值和背景图片只选其所以将第 3个参数置为空

Html结构:

<div =" rightbgimg "></div>

第 6种:Img图片圆角

纯CSS思路方法是无法做到Img图片圆角但有JS加入就可以变相实现原理和第 5种相似只是将这个Img图片路径取出来在js中以背景图片方式加入到各个容器中去然后再还原img标签

Js行为:

b_RoundCurve("img","#999","#FFF5FA",2);//圆角IMG图片

解释: 4个参数分别代表样式名称、边框色值、背景色值、风格参数

Html结构:

最简洁HTML结构无冗余代码

<div ="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>

组件优点:

1. 全面兼容所有浏览器

2. 圆角不需要图片直接代码生成省去制图麻烦

3. 自适应外框大小可广泛应用于布局区块中

4. 封装难以控制CSS代码灵活方便

5. 封装HTML结构你只需定义你想要结构无冗余更语义化

组件缺点:

1. 不能定义线框大小如果你需要改变线框大小本组件不适合你

2. 圆角不够圆滑如果你对圆角图片精度要求较高不宜采用本组件

3. 线框颜色和背景色不宜采用对比太强烈颜色容易看出锯齿

本模型在以下浏览器中完美通过:

IE5.5、IE6、IE7、IE8、FF3、TT、Maxthon2.1.5、Opera9.6、Safari4.0、Chrome2.0

点击这儿下载完整压缩包:下载Demo
Tag标签: css,js