当前位置:首页 > 前端技术 > CSS圆角框组件 V1.0

CSS圆角框组件 V1.0

2022年09月16日 19:05:57前端技术4

 


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


文章导航:

第一章:基本的圆角框

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

第三章:圆角化图片

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


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

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

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

先看看最终效果截图:

CSS圆角框组件 V1.0 _ JavaClub全栈架构师技术笔记

图一

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

1. 纯线框圆角。

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

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

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

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

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结构,无冗余代码。

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

作者:Biny
来源链接:https://www.cnblogs.com/binyong/archive/2009/12/11/1621484.html

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/42137.html

标签: css
分享给朋友:

“CSS圆角框组件 V1.0” 的相关文章

Html/Css

原文地址:http://blog.csdn.net/annip/article/details/53455226 一.什么是role属性 role属性作用是告诉Accessibility类应用(比如屏幕朗读程序,为盲人提供的访问网络的便利程...

什么是HTML和CSS

什么是HTML和CSS? HTML的定义: 首先来说HTML,HTML中文称为超文本标记语言,从语义上来说,它只是一种是一种标识性的语言,并不是一种编程语言。所以在提及其作用时,只能从语义方面去想,而不能从样式上去想。它其中有许许多多的标签,...

优秀工具推荐:超实用的 CSS 库,样板和框架

优秀工具推荐:超实用的 CSS 库,样板和框架

当启动一个新的项目,使用 CSS 框架或样板,可以帮助您节省大量的时间。在这篇文章中,我编译整理了我最喜欢的 CSS 样板,框架和库,帮助你在建立网站或应用程序时更加高效。   当启动一个新的项目,使用 CSS 框架或样板,可以帮助您节省大量的时间。在这篇文...

HTML&CSS实验(5)---学习颜色、字体、文本格式化和盒模型的样式定义

HTML&CSS实验(5)---学习颜色、字体、文本格式化和盒模型的样式定义

  【实验题目】HTML&CSS实验(5) 【实验目的】学习颜色、字体、文本格式化和盒模型的样式定义。                  ----------------------个人作业,如果有后辈的作业习题一致,可以参考学习,一起交流...

CSS:水平居中与垂直居中

CSS:水平居中与垂直居中

CSS居中算是一个比较基础的问题,在实际运用中,需要考虑到的一般是两种情况,一种是主要是表现为文字,图片等行内元素的居中,一种是指 div 等块级标签元素的居中。 水平居中 1、行内元素 行内元素(主要是表现为文字,图片等行内元素)...

js修改css样式的方法,js如何设置css样式?js修改css样式的方法

js如何设置css样式?本篇文章就给大家介绍js设置(修改)css样式的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 下面我们就给大家介绍使用javascript是如果设置css样式的。 1、直接设置样式(内联样式) 使...

ZH奶酪:通过CSS自定义HTML中hr样式-颜色-形状

ZH奶酪:通过CSS自定义HTML中hr样式-颜色-形状

修改颜色,线条形状,粗细等... CSS代码: .zh_hr{ border:3px solid rgba(255, 255, 255, 0.50); margin-bottom: 2px; margin-top: 2px }...

CSS元素类型

CSS元素类型

前面有一篇文章讲到在css世界中,html元素的表现都是一个个盒子,而css中盒子的显示方式有三种方式,分别是块元素、行内元素和行内块元素。本文总结这三种显示方式的特征和区别。 1 写在前面 最近在整理cnblogs上页面的样式,默认右侧【随笔分类】中的标...

修改nui-app中rich-text富文本内容的css样式

如何修改rich-text富文本内容的css样式 以图片举例: 我们可以使用正则匹配的方式为富文本的标签加上类名: 富文本渲染数据.replace(/\<img/gi, '<img class="richImg"'); 然...

CSS 简介

CSS 简介 什么是 CSS? CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。