纯CSS圆角框(2)
来源:冰极峰blog 时间:2009-12-11 18:57:00
现在已经将一个圆角框描述出来了,但是有一个问题要注意,就是内容区的背景色,因为这儿是存载文字主体的地方。所以还需要加入下面这句话,也是群集选择符来设置圆角内的所有背景色。
.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .content{background:#EFF7FF;}
这儿除了b1和b8外,其它的标签都包含进来了,并且包括content容器,将它们的背景色全部设置一个颜色,这样除了线框外的所有地方都成为一种颜色了。在这儿我也用到包含选择符,给它们都加了一个color1,这是颜色方案1的类名,依照这个原理可以设置不同的换肤方案。
好了,我们将上面的所有代码集中起来,就完成一个纯CSS圆角框的实例模型,在源码中,我设置了六套颜色方案,其它的颜色方案就看你的了。
下面是源码演示后的截图:
图二
为了演示效果,本模型的宽度值全部采用百分比实现的,你可以随意伸缩宽度,看看它能否适应弹性的变化。
本模型在以下浏览器中完美通过:
IE5.5、IE6、IE7、IE8、FF3、TT、Maxthon2.1.5、Opera9.6、Safari4.0、Chrome2.0。
点击这儿下载完整的压缩包:Demo(1.75 KB)
本站下载地址:css圆角.rar (1.75 KB)
标签:圆角,css,圆角框,纯css
0
投稿
猜你喜欢
javascript 动态插入技术
2009-12-14 20:50:00
firefox通过XUL实现text-overflow:ellipsis的效果
2008-07-08 19:12:00
MYSQL5 下的兼容说明(my.ini my.conf)
2008-02-23 10:13:00
精简版的MySQL制作步骤
2011-03-08 09:52:00
关于Math.PI、前自增和后自增
2009-05-25 12:38:00
asp中把数据表映射成ajax可调用的json格式的方法
2010-01-22 15:27:00
SQL Server中通过reverse取某个最后一次出现的符号后面的内容(字符串反转)
2012-07-11 15:59:36
求英文字母或数字或下划线或汉字的js正则表达式
2009-08-04 17:59:00
asp生成带日期的随机数
2008-09-03 13:13:00
大牌 Banner 设计欣赏(468x60)
2008-01-20 13:02:00
使用DIV+CSS设计网页的好处
2007-10-14 15:02:00
[多图]新:60个国外创意404页面设计
2008-12-05 12:00:00
用asp程序读取网站的alexa世界排名
2008-11-23 20:43:00
ASP写的汉字转换为UTF-8的一段代码
2009-07-05 18:49:00
Qzoneing主题视觉设计分享
2009-07-21 18:12:00
ORCLE 表中列的修改
2009-07-28 10:42:00
教你制作1px边框表格的四种方法
2008-10-04 10:16:00
ASP生成XML文件
2009-06-29 16:28:00
编辑BLOG文章的一些好习惯
2007-11-15 06:35:00
jQuery点击改变链接的文本
2010-03-19 18:11:00