课程主题了解CSS网页设计客户端技术课程.pptx

网页设计客户端技术课程现代殡葬技术与管理专业群教学资源库主讲人：严志课程主题：了解CSS3

任务三了解CSS3CSS3简介01CSS3边框02

了解CSS3三CSS3简介01CSS即层叠样式表（Cascading?StyleSheet）。在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。

了解CSS3三CSS3简介01CSS3最重要的模块包括：选择器框模型背景和边框文本效果2D/3D转换动画多列布局用户界面CSS3完全向后兼容，因此您不必改变现有的设计。浏览器通常支持CSS2。W3C仍然在对CSS3规范进行开发。不过，现代浏览器已经实现了相当多的CSS3属性。

了解CSS3三CSS3边框02通过CSS3，增加了新的属性能够创建圆角边框，向矩形添加阴影，使用图片来绘制边框。属性如下：border-radius，绘制圆角边框；box-shadow，绘制边框阴影；border-image，绘制图片边框。

了解CSS3三CSS3边框02在CSS2中添加圆角矩形需要技巧。我们必须为每个圆角使用不同的图片。在CSS3中，使用属性border-radius创建圆角边框。例如，可以使用以下代码向div标签添加圆角：div{border:2pxsolid;border-radius:25px;-moz-border-radius:25px;/*OldFirefox*/}（1）CSS3圆角边框

了解CSS3三CSS3边框02在CSS3中，使用属性box-shadow向方框添加阴影。例如：可以使用以下代码向div标签添加方框阴影：div{ box-shadow:10px10px5px#888888;}（2）CSS3边框阴影

了解CSS3三CSS3边框02在CSS3中，使用属性border-image，可以使用图片来创建边框。例如：可以使用以下代码向div标签添加图片边框：div{border-image:url(border.png)3030round;-moz-border-image:url(border.png)3030round;/*老的Firefox*/-webkit-border-image:url(border.png)3030round;/*Safari和Chrome*/-o-border-image:url(border.png)3030round;/*Opera*/}（3）CSS3边框图片

了解CSS3三CSS3边框02!DOCTYPEhtmlhtmlheadmetahttp-equiv=Content-Typecontent=text/html;charset=utf-8/title例6-7使用CSS3设置圆角边框及边框阴影/titlestyle……/style/headbodydivid=“div1”border-radius属性允许您向元素添加圆角。/divbr/br/br/divid=div2box-shadow属性用于向方框添加阴影/divbr/br/br//body/html例5-7CSS3设置圆角边框及边框阴影#div1{ /*圆角边框*/ text-align:center; border:2pxsolid#a1a1a1; padding:10px40px; background:#dddddd; width:200px; border-radius:25px; -moz-border-radius:25px;/*老的Firefox*/}#div2{ text-align:center; border:2pxsolid#a1a1a1; padding:10px40px; background:#dddddd; width:200px; border-radius:25px; -moz-border-radius:25px;/*老的