读书频道 > 网站 > 网页设计 > HTML 5与CSS 3权威指南(第2版·下册)
18.2.2 一个简单的CSS 3示例
13-03-14    奋斗的小年轻
收藏    我要投稿   
全书共29章,本书分为上下两册:上册(1~17章)全面系统地讲解了HTML 5相关的技术,以HTML 5对现有Web应用产生的变革开篇,顺序讲解了HTML 5与HTML 4的区别、HTML 5的结构、表单元素、HTML编辑API、图形绘...立即去当当网订购

现在,我们已经对CSS 3的模块和模块化结构有了一个初步的认识,那么,究竟我们能够用CSS 3来做些什么呢?

这里,我们通过一个示例,来将CSS 2与CSS 3做一个对比,借此对CSS 3有一个初步的印象。

在这个示例中,我们给页面上的某个div区域添加一个彩色图像边框,这样可以使这个区域看上去漂亮很多,生动很多。

在CSS 2中,当然可以实现这个效果,如代码清单18-1所示。

代码清单18-1   使用CSS 2给div区域添加图像边框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<style type="text/css">
#image-boarder{
margin:3px;
width:450px;
height:104px;
padding-left:14px;
padding-top:20px;
background:url(test.png);
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div id="image-boarder">
?示例文字1<br/>
?示例文字2<br/>
?示例文字3<br/>
?示例文字4<br/>
</div>
</body>
</html>

这段代码在Firefox浏览器中的运行结果如图18-1所示。


 

接下来,我们看一下在CSS 3中如何实现这个功能。

在CSS 3中,添加了很多新的样式,譬如可以创建圆角边框,可以在边框中使用图像,可以修改背景图像的大小,可以对背景指定多个图像文件,可以修改颜色的透明度,可以给文字添加阴影,可以在CSS中重新指定表单的尺寸等。

在代码清单18-2中,我们使用CSS 3来实现与代码清单18-1相同的功能。具体操作的时候,只要给页面中的div元素增加一个border-image属性,然后在该属性中指定图像文件、边框宽度与图像拉伸方式就可以了。

代码清单18-2   使用CSS 3给div区域添加图像边框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<style type="text/css">
#image-boarder{
width:450px;
padding-top:20px;
padding-left:14px;
-moz-border-image:url(test.png) 3  stretch stretch;    //指定边框图像
}
</style>
</head>
<body>
<div id="image-boarder">
?示例文字1<br/>
?示例文字2<br/>
?示例文字3<br/>
?示例文字4<br/>
</div>
</body>
</html>

这段代码的运行后结果与图18-1所示结果相同。

虽然目前看来两种方法都达到了同样的效果,只是实现方法不同而已。但是如果再在div中增加一行文字,我们看一下使用CSS 2中的样式表后会是什么情况,如图18-2所示。

同样的,来看一下使用CSS 3中的样式表后会是什么情况,如图18-3所示。

为什么在CSS 3中文字没有超出边框图像之外?这是因为在CSS 3样式表中,在指定边框图像的同时,也指定了图像允许拉伸来自动适应div区域的高度,而不是采取CSS 2中将div区域高度设为边框图像高度的方式。那么,也许有人会问,如果在CSS 2的div元素的样式代码中不指定div区域的高度是否可以呢?这样的话就会出现如图18-4所示的情况。


 

从图中可以看出,当只有一行文字的时候,该边框图像又不能完全显示了。因此,当div区域中的文字高度处于不断变化的状态时,使用CSS 2样式表添加边框图像的操作相对来说就比较麻烦。在CSS 3中考虑到了这种情况,添加了允许边框图像自动拉伸的属性,从而解决了这个问题。

关于如何使用border-image这个属性,我们将在后面进行详细介绍。在这里,我们通过这个示例,向大家表明了目前在CSS 2中一些比较难以处理的情况,在CSS 3中通过使用新增属性很容易就能够解决。

这对界面设计来说,无疑是一件非常可喜的事情。在界面设计中,最重要的就是创造性,如果能够使用CSS 3中新增的各种各样的属性,就能够在页面中增加许多CSS 2中没有办法解决的样式,摆脱现在界面设计中存在的许多束缚,从而使整个网站或Web应用程序的界面设计进入一个新的台阶。

点击复制链接 与好友分享!回本站首页
分享到: 更多
您对本文章有什么意见或着疑问吗?请到论坛讨论您的关注和建议是我们前行的参考和动力  
上一篇:1.3 功能
下一篇:1.5 小结
相关文章
图文推荐
JavaScript网页动画设
1.9 响应式
1.8 登陆页式
1.7 主题式
排行
热门
文章
下载
读书

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训
版权所有: 红黑联盟--致力于做最好的IT技术学习网站