DIV+CSS网页制作实战第35次课(2课时)CSS 3.0 新增属性.pptxVIP

课次35课时2教具投影仪项目 项目3 网页外观制作技术任务 任务3.7 CSS 3.0 的新增属性知识点 1. CSS 3.0 的新增属性（90分钟）重点 CSS 3.0 的新增属性难点 CSS 3.0 的新增属性备注 上机操作90分钟/ 37知识技能目标掌握 CSS 3.0 的新增属性/ 37 3.4.1 任务分析 本任务在页面中使用一些CSS3.0 的新增属性，使得用户网站显示效果更加酷炫，控制更加方便。? 3.4.2 CSS 3.0 的新增属性 CSS 3.0 的新增属性目前已被IE9+及其他极速内核浏览器支持。早期出于兼容性的考虑，针对不同浏览器还要在属性前加上特定前缀，例如在谷歌浏览器使用时在属性代码前加-webkit-，在火狐浏览器使用时在属性代码前加-moz-等等。常用的CSS 3.0 的新增属性如下： 1. box-shadow（DIV阴影效果） 格式：box-shadow：阴影水平偏移 阴影垂直偏移 阴影模糊值 阴影颜色 注：阴影偏移值可正可负。box-shadow属性的兼容性见下表。 / 37下面的代码显示效果如图所示：headstyle type=text/css#box{ width: 95%; padding: 10px; background-color: #FF9900; color: #FFF;text-align:center; box-shadow: 3px 3px 6px #666;}/style/headbodydiv id=boxDIV的阴影效果/div/body/ 37 2．boder-radius（圆角DIV） 该属性用来实现圆角边框效果，主要参数是圆角半径值（单位为px,不能为负，为0时表示直角）。 格式1：border-radius:10px；/*四个角都是半径为10px的圆角*/ 格式2：border-radius:20px 5px；/*左上角和右下角的半径为20px；右上角和左下角的半径为5px*/ 格式3：border-top-left-radius:10px；/*左上角是半径为10px的圆角*/ 格式4：border-bottom-right-radius:10px；/*右下角是半径为10px的圆角*// 37 border-radius属性值与显示效果如图所示，图中第四种DIV效果IE不支持，而在谷歌浏览器下解析成圆角的水平半径为20px，垂直半径为5px。/ 37 3．border-color（边框颜色） 该属性用来设置对象边框的颜色，在CSS3.0中增强了该属性的功能。如果设置了border的宽度为Xpx，则可以在这个border上使用X种颜色（由外向内），每种颜色显示1px的宽度。如果所设置的border的宽度为10像素，但只声明了5种或6种颜色，则最后一种颜色将被添加到剩下的宽度。目前仅火狐浏览器支持边框多重颜色的效果，如图所示。/ 37 4．border-image（图像边框） 该属性用来设置图像作为对象的边框。注意，如果table标签设置了border-collapse:collapse，则border-image属性将失效。 格式：border-image: url(图片文件) 边框宽度 上下填充方式 水平填充方式 说明: （1）边框宽度 例如 0 12 0 12 分别是上、右、下、左边框的宽度。 （2）上下、水平填充方式 stretch：用拉伸方式填充边框背景图。 repeat：用重复方式来填充边框背景图，当图片碰到边界时，如果超过则被截断。 round：用平铺方式来填充边框背景图，图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框。/ 37下面的代码显示效果如图所示。headstyle type=text/css#box{display: block;height: 53px;padding: 10px;font-size: 16px;text-decoration:inherit; /*继承*/color: white;line-height: 53px;text-align: center;border-width: 0 70px;border-image: url(images/7301.jpg) 0 70 0 70 stretch stretch;-webkit-border-image: url(images/7301.jpg) 0 70 0 70 stretch stretch; }/style/headbodydiv id=box图像边框效果/div/body/ 37 5．background-origin（背景起点） 该属性用来决定background-position（背景位置定位）计算的开始参考位置。 格式：