网络编程
位置:首页>> 网络编程>> 网页设计>> 纯CSS圆角框(2)

纯CSS圆角框(2)

 来源:冰极峰blog 发布时间:2009-12-11 18:57:00 

标签:圆角,css,圆角框,纯css

现在已经将一个圆角框描述出来了,但是有一个问题要注意,就是内容区的背景色,因为这儿是存载文字主体的地方。所以还需要加入下面这句话,也是群集选择符来设置圆角内的所有背景色。

.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)

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com