纯CSS圆角框
来源:冰极峰blog 发布时间:2009-12-11 18:57:00
第一章:基本的圆角框
第二章:透明圆角化背景图片
第三章:圆角化图片
第四章:CSS圆角框组件 V1.0
序言:在我的文章《超圆滑圆角框的半完美解决方案》中已经总结了七种不同的圆角框解决方案,基本上总结完了目前网络上比较流行的圆角框实现方案。而在我的另一篇文章《无图片山顶角》中又是一个另类的实现方法。
纯CSS实现圆角框是一件大家都说烂了的事件,我也写过两篇总结文章,为什么还会有这篇文章呢,事情是这样的。在我们的以前的项目中,实现圆角框往往是用背景图片来实现的,但是,当这些项目发布上线后,在维护过程中,有时需要添加一些新的需求,因为以前的项目中大量采用了圆角图片,并且这些图片全部采用了CSS sprites方式合并的图,为了不增加更多的额外工作,并且也不想用JS来添加更多的http请求,所以需要一些简单的CSS方案来解决这个问题。而我的个人爱好,也喜欢采用无图片的方式来处理这些效果。总觉得CSS能完成的工作,为什么不让它来实现呢?
实现原理:
纯CSS方式实现圆角框的原理在网络上已经有很多人详细解说了,下面这个示意图是我将其中的一个圆角进行放大后的效果。
图一
从上面效果图中我们可以看到其实这种圆角框是靠一个个容器堆砌而成的,每一个容器的宽度不同,这个宽度是由margin外边距来实现的,如:margin:0 5px;就是左右两侧的外边距5像素,从上到下有5条线,其外边距分别为5px,3px,2px,1px,依次递减。因此根据这个原理我们可以实现简单的html结构和样式。
1、Html结构层:
<div class="sharp color1">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="content">文字内容</div>
</div>
<b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b>
</div>
b1~b4构成上面的左右两个圆角结构体,而b5~b8则构建了下面左右两个圆角结构体。而content则是内容主体,将这些全部放在一个大的容器中,并给它的一个类名sharp,用来设置通用的样式。再给它叠加了一个color1类名,这个类名用来区别不同的颜色方案,因为可能会有不同颜色的圆角框。
2、CSS样式:
.b1,.b2,.b3,.b4,.b5,.b6,.b7,.b8{height:1px; font-size:1px; overflow:hidden; display:block;}
.b1,.b8{margin:0 5px;}
.b2,.b7{margin:0 3px;border-right:2px solid; border-left:2px solid;}
.b3,.b6{margin:0 2px;border-right:1px solid; border-left:1px solid;}
.b4,.b5{margin:0 1px;border-right:1px solid; border-left:1px solid; height:2px;}
将每个b标签都设置为块状结构,并定义其高度为1像素,超出部分溢出隐藏。从上面样式中我们已经看到margin值的设置,是从大到小减少的。而b1和b8的设置是一样,已经将它们合并在一起了,同样的原理,b2和b7、b3和b6、b4和b5都是一样的设置。这是因为上面两个圆和下面的两个圆是一样,只是顺序是相对的,所以将它合并设置在一起。有利于减少CSS样式代码的字符大小。后面三句和第二句有点不同的地方是多设置了左右边框的样式,但是在这儿并没有设置边框的颜色,这是为什么呢,因为这个边框颜色是我们需要适时变化,所以将它们分离出来,在下面的代码中单独定义。
接下我们设置内容区的样式:
.content {border-right:1px solid;border-left:1px solid;overflow:hidden;}
也是只设置左右边框线,但是不设置颜色值,它和上面八个b标签一起构成圆角框的外边框轮廓。
往往在一个页面中存在多个圆角框,而每个圆角框有可能其边框颜色各不相同,有没有可能针对不同的设计制作不同的换肤方案呢,答案是有的。在我的这个应用中,可以换不同的皮肤颜色,并且设置颜色方案也并不是一件很难的事情。下面看看我是如何将它们应用到不同的颜色的。
在上面的样式设计中,我已经给颜色方案留下了可以扩展的空间。我将所有的涉及到边框色的类名全部集中在一起,用群选择符给它们设置一个边框的颜色就可以了。如下所示:
.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,.color1 .b7,.color1
.content{border-color:#96C2F1;}
.color1 .b1,.color1 .b8{background:#96C2F1;}
注意:需要将这两句的颜色值设置为一样的,第二句中虽说是设置的background背景色,但它同样是上下边框线的颜色,这一点一定要记住。因为b1和b8并没有设置border,但它的高度值为1px,所以用它的背景色就达到了模拟上下边框的颜色了。
猜你喜欢
- 惊现!表面下的隐藏信息——浅谈信息可视化1910年,病卧床上的魏格那(德国气象学家,以“大陆漂移学说”闻名),无意地注视着墙上的世界地图……
- 空白双边距是一个极容易误解的CSS特性.它不是CSS的bug,但如果我们一旦误解,将会给你带来很多麻烦.先看如下demo代码:<!do
- 安装 SQL2000 时,系统经常会提示:操作被挂起,要求重新启动计算机,如图1: 图1重新启动后,再次安装时问题仍然存在。解决办
- 代码如下:---1.平均销售等待时间 ---有一张Sales表,其中有销售日期与顾客两列,现在要求使用一条SQL语句实现计算 --每个顾客的
- 今天在一个QQ群中看到有人在问一个进度条的实现方式,当时因为工作时间,需求相对也比较紧,只是简单的说了一下可以通过CSS的边框属性和背景属性
- 近日,朋友写一个关于成绩管理的系统,其中遇到一个小问题。如果按照SQLSERVER的ORDER 排序时,比如遇到两个100分,结果必然是名次
- 通过亲密性原则,我们可以将一个页面中的元素按照某种逻辑理解上的差异划分成不同的元素组合;再通过对齐原则,使这些不同的元素组合在视觉上看起来彼
- 记得从ymPrompt2.0的时候自己就遇到过在IE下有时会莫名其妙的提示“无法打开Internet站点 已终止操作”,这样的一个错误很让人
- 长期以来一直以为iframe跟div一样都是块级元素,直到今天在一个群中看到一位朋友问到iframe怎么居中的时候,测试了下发现原来我一直对
- DateDiff(timeinterval,date1,date2 [, firstdayofweek [, firstweekofyear
- 目前,保护数据免受未授权用户的侵犯是系统管理员特别关心的问题。如果你现在用的是MySQL,就可以使用一些方便的功能来保护系统,来大大减少机密
- 今天逛论坛时看到有朋友问,是否有专门教Javascript的学校,这里想想把自己的一点建议和自己3年来的前端Javascript开发的经验跟
- 我们可使用Haskeys属性判别每个条目是否为一个集合,遍历完整的Request.Cookies集合,以来取得所有cookie的列表及其值:
- Oracle提供了不少方法用于数据空间的使用、监控和维护,同时也在各版本中陆续对这方面的功能进行了增强,目的在于简化这方面工作的复杂度,提高
- 有关 Web 字体的话题正在增多,对 Web 设计师来说,他们并不关注技术细节,不管是 TrueType 的 Hinting 技术
- 因为有个老Yashica相机机身,前一阵忍不住想配几个标准镜头。到国内购物网站以及摄影器材交流论坛上看了看,发现不仅很少,价格不实在,而且品
- Jabob Nielsen提出的10个可用性原则中有一个原则-防止出错(Error Prevention)。官网中有对这一原则的具体解释,这
- asp判断网址格式是否合法代码 具体实现办法见下列代码:<% function checki
- 本文讲解如何设置SQL Server数据库全文索引服务。在Microsoft SQL Server 7.0 中提供了全文索引服务(Full-
- 内容摘要:本文介绍了使用SQL语句修改数据记录的两种方法,一是使用rs.update,二是使用conn.Execute(sql),相信对初学