纯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.5IE6IE7IE8FF3TTMaxthon2.1.5Opera9.6Safari4.0Chrome2.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
  • asp之家 网络编程 m.aspxhome.com