HTML5+CSS3网页设计基础-第六章-CSS盒子模型.pptx

1、HTML5+CSS3网页设计基础第6章 CSS盒子模型第1页第第6章章 CSS盒子盒子模型模型本章概述 本章的学习目标主要内容HTML5+CSS3网页设计基础第6章 CSS盒子模型第2页本章概述本章概述l盒模型是盒模型是CSS中一个重要概念，文档中的每个元中一个重要概念，文档中的每个元素被描绘为矩形盒子。一个盒子包括素被描绘为矩形盒子。一个盒子包括content（实际内容）、（实际内容）、padding（内边距）、（内边距）、border（边框）和（边框）和margin（外边距（外边距）。l本章将具体本章将具体介绍介绍盒子的各种外观属性和背景属性盒子的各种外观属性和背景属性及其及其设置方法设置

2、方法。HTML5+CSS3网页设计基础第6章 CSS盒子模型第3页本章的学习目标本章的学习目标l理解盒子模型的概念。理解盒子模型的概念。l掌握掌握盒子模型盒子模型宽度和高度属性的意义及其设置宽度和高度属性的意义及其设置方方法。法。l掌握盒子模型边框属性的意义及其设置掌握盒子模型边框属性的意义及其设置方法。方法。l掌握盒子模型边距属性的意义及其设置掌握盒子模型边距属性的意义及其设置方法。方法。l掌握盒子模型背景颜色和背景图像设置方法。掌握盒子模型背景颜色和背景图像设置方法。l掌握掌握CSS3渐变背景的设置方法。渐变背景的设置方法。l掌握综合应用设置盒子属性制作页面的方法。掌握综合应用设置盒子属性

3、制作页面的方法。HTML5+CSS3网页设计基础第6章 CSS盒子模型第4页主要内容主要内容6.1 盒模型盒模型简介简介6.2 盒子外观属性盒子外观属性6.3 背景属性背景属性6.4 实实训训6.5 本章小结本章小结 HTML5+CSS3网页设计基础第6章 CSS盒子模型第5页6.1 盒模型简介盒模型简介l盒模型是盒模型是CSS中一个重要概念，文档中的每个元素被描绘中一个重要概念，文档中的每个元素被描绘为矩形盒子。一个盒子包括为矩形盒子。一个盒子包括content（实际内容）、（实际内容）、padding（内边距）、（内边距）、border（边框）和（边框）和margin（外边（外边距）。距）

4、。HTML5+CSS3网页设计基础第6章 CSS盒子模型第6页6.2 盒子外观属性盒子外观属性 本节主要内容：本节主要内容：l案例分析案例分析l盒模型的宽和高盒模型的宽和高l盒子边框属性盒子边框属性l盒模型边距属性盒模型边距属性l案例制作案例制作HTML5+CSS3网页设计基础第6章 CSS盒子模型第7页6.2.1 案例案例分析分析l【案例展示】【案例展示】首页首页-企业新闻。企业新闻。使用使用盒模型的基本知识盒模型的基本知识设设计计网站网站首页首页-企业新闻局部页面。企业新闻局部页面。l【知识要点】【知识要点】盒模型的宽度、高度、内边距、边框和外边盒模型的宽度、高度、内边距、边框和外边距。距

5、。l【学习目标】掌握设置盒子属性的方法【学习目标】掌握设置盒子属性的方法。l参考代码：参考代码：6-2.htmlHTML5+CSS3网页设计基础第6章 CSS盒子模型第8页6.2.2 盒模型的宽和高盒模型的宽和高l语法：语法：width:auto|length|%height:auto|length|%l参数：参数：auto：浏览器计算实际的宽度（高度）。：浏览器计算实际的宽度（高度）。length：自定义元素的宽度（高度），常用取值单位为像：自定义元素的宽度（高度），常用取值单位为像素素px。%：定义基于父元素宽度（高度）的百分比宽度：定义基于父元素宽度（高度）的百分比宽度（高度（高度）。l

6、参考示例：参考示例：6-2-1.htmlHTML5+CSS3网页设计基础第6章 CSS盒子模型6.2.2 盒模型的宽和高盒模型的宽和高l1.盒子盒子模型模型lW3C模型中，模型中，width/height=content盒子盒子实际宽度实际宽度/高度高度=content+border+paddinglIE模型中，模型中，width/height=content+padding+border 盒子盒子实际宽度实际宽度/高度高度=widthl而盒子所占空间而盒子所占空间=盒子实际宽度盒子实际宽度/高度高度+margin。l图图6-1所示的所示的盒子盒子模型模型中中，默认采用，默认采用W3C模型，如

7、模型，如图图6-4所示。所示。实际实际宽度宽度=200+10*2+3*2=226px，实际实际高度高度=100+10*2+3*2=126px，所所占空间宽度占空间宽度=226+20*2=266px，所所占空间高度占空间高度=126+20*2=166px。第9页HTML5+CSS3网页设计基础第6章 CSS盒子模型6.2.2 盒模型的宽和高盒模型的宽和高l2.box-sizing属性属性 盒子盒子采用何种模型，可以用采用何种模型，可以用box-sizing属性属性设置设置l设置标准的盒模型（默认值）设置标准的盒模型（默认值）box-sizing：content-box;标准标准的盒模型的的盒模型

8、的width和和height只包括内容（只包括内容（content）的宽度和）的宽度和高度高度l设置设置IE模型模型 box-sizing：border-box;设置设置盒子宽度和高度的时候，其包括：盒子宽度和高度的时候，其包括：content+padding+border第10页HTML5+CSS3网页设计基础第6章 CSS盒子模型6.2.2 盒模型的宽和高盒模型的宽和高l3.应用范围应用范围 盒子盒子的宽度和高度适用于块级（的宽度和高度适用于块级（block）元素和内联（）元素和内联（inline-block）元素，行内元素无效。）元素，行内元素无效。l参考示例参考示例6-2-2.html

9、 span是行级元素，设置的宽度和高度无效。是行级元素，设置的宽度和高度无效。第11页HTML5+CSS3网页设计基础第6章 CSS盒子模型6.2.2 盒模型的宽和高盒模型的宽和高l4.元素类型与元素类型转换元素类型与元素类型转换l(1)文档文档中元素都可以划归为中元素都可以划归为 block和和 inline两种两种类型类型l块级元素块级元素(block)，块级元素的宽度为，块级元素的宽度为100%，始终占据一，始终占据一行。行。、和和等元素都是块级元素。等元素都是块级元素。l行级元素行级元素(inline)，行级元素没有高度和宽度，行级元素，行级元素没有高度和宽度，行级元素前后没有换行符，

10、没有固定的形状，显示时只占据其内容前后没有换行符，没有固定的形状，显示时只占据其内容的大小。的大小。、和表单元素等都是行级元素。和表单元素等都是行级元素。第12页HTML5+CSS3网页设计基础第6章 CSS盒子模型6.2.2 盒模型的宽和高盒模型的宽和高l(2)使用使用 display属性对元素的类型进行属性对元素的类型进行转换转换ldisplay:inline，元素将显示为行内元素，元素将显示为行内元素(行内元素默认的行内元素默认的 display属性值属性值)ldisplay:block，元素将显示为块元素，元素将显示为块元素(块元素默认的块元素默认的 display属性值属性值)ldi

11、splay:inline-block，元素将显示为行内块元素，可以，元素将显示为行内块元素，可以对其设置宽高和对齐等属性，但是该元素不会独占一行。对其设置宽高和对齐等属性，但是该元素不会独占一行。ldisplay:none，元素将被隐藏，该元素及其所有内容不再，元素将被隐藏，该元素及其所有内容不再显示，也不占用文档中的空间。显示，也不占用文档中的空间。l参考示例参考示例：6-2-3.html第13页HTML5+CSS3网页设计基础第6章 CSS盒子模型第14页6.2.3 盒子的边框属性盒子的边框属性l1.边框宽度（边框宽度（border-width）l语法语法：border-width:14

12、medium|thin|thick|length;l参数：参数：medium：定义中等的边框（默认）。：定义中等的边框（默认）。thin：定义细的边框。：定义细的边框。thick：定义粗的边框。：定义粗的边框。length：自定义：自定义边框的宽度边框的宽度，常用取值单位为像素，常用取值单位为像素px。l示例：设置段落的边框宽度。示例：设置段落的边框宽度。pborer-width:thin;/*四边都是细的边框四边都是细的边框*/pborer-width:2px thick;HTML5+CSS3网页设计基础第6章 CSS盒子模型6.2.3 盒子的边框属性盒子的边框属性l2.边框样式（边框样式（

13、border-style）l语法语法：border-style:14 none|solid|dashed|dotted|double|groove|ridge|inset|outset;l参数参数：none：无边框：无边框。solid：边框为单实线。：边框为单实线。dashed：边框为虚线：边框为虚线。dotted：边框为点线。：边框为点线。double：边框为双实线。：边框为双实线。groove：根据：根据border-color的值画的值画3D凹槽。凹槽。ridge：根据：根据border-color的值画棱形边框。的值画棱形边框。inset：根据：根据border-color的值画的值画

14、3D凹边。凹边。outset：根据：根据border-color的值画的值画3D凸边。凸边。l示例：示例：pborer-style:dashed solid;/*上下边虚线，左右边实线上下边虚线，左右边实线*/第15页HTML5+CSS3网页设计基础第6章 CSS盒子模型第16页6.2.3 盒子的边框属性盒子的边框属性l3.边框颜色（边框颜色（border-color）l语法语法：border-color:14 color;l参数：参数：color的取值有如下几种。的取值有如下几种。预定预定义的颜色值，如义的颜色值，如blue、gray、red、yellow等。等。十六进制十六进制#RRGGB

15、B。RGB代码代码rgb(r,g,b)。示例：示例：pborer-color:#CCC#FF0000;/*上下边框灰色，左右边框红色上下边框灰色，左右边框红色*/l边框样式设置边框样式设置参考示例参考示例：6-2-4.htmlHTML5+CSS3网页设计基础第6章 CSS盒子模型6.2.3 盒子的边框属性盒子的边框属性l4.边框综合属性设置（边框综合属性设置（border）l语法语法：border-top:border-width border-style border-color 其他其他各边的设置方法相同。各边的设置方法相同。l示例：示例：border-bottom:2px solid#9

16、99;/*上边框样式上边框样式2px的灰色实线的灰色实线*/l用用border属性设置四条边框共同的样式。属性设置四条边框共同的样式。l语法：语法：border:border-width border-style border-color l示例：示例：border:1px solid green;/*四条边框都是四条边框都是1px的绿色实线的绿色实线*/l参考参考示例示例：6-2-5.html第17页HTML5+CSS3网页设计基础第6章 CSS盒子模型6.2.3 盒子的边框属性盒子的边框属性l5.圆角边框（圆角边框（border-radius）l语法语法：border-radius:14

17、length|%/14 length|%l参数：参数：length：自定义圆角半径的大小，常用取值单位为像素：自定义圆角半径的大小，常用取值单位为像素px%：以百分比定义圆角半径的大小：以百分比定义圆角半径的大小。第一第一个参数表示圆角的水平半径，第二个参数表示圆角的个参数表示圆角的水平半径，第二个参数表示圆角的垂直半径，两个参数之间用垂直半径，两个参数之间用“/”隔开，如果第二个参数省略隔开，如果第二个参数省略，则默认等于第，则默认等于第1个参数个参数。属性属性值遵循值复制的原则，可以设置值遵循值复制的原则，可以设置14个个值值。l参考示例参考示例：6-2-6.html，6-2-7.html

18、第18页HTML5+CSS3网页设计基础第6章 CSS盒子模型6.2.3 盒子的边框属性盒子的边框属性l6.盒子阴影（盒子阴影（box-shadow）l语法语法：box-shadow:h-shadow v-shadow blur spread color insetl参数：参数：h-shadow：水平阴影的位置，允许负值，必需。：水平阴影的位置，允许负值，必需。v-shadow：垂直阴影的位置，允许负值，必需。：垂直阴影的位置，允许负值，必需。blur：模糊距离，可选。：模糊距离，可选。spread：阴影的尺寸，可选。：阴影的尺寸，可选。color：阴影的颜色，可选。：阴影的颜色，可选。ins

19、et：将外部阴影：将外部阴影(outset)改为内部阴影，可选改为内部阴影，可选。l参考示例参考示例：6-2-8.html，6-2-9.html第19页HTML5+CSS3网页设计基础第6章 CSS盒子模型第20页6.2.4 盒模型边距属性盒模型边距属性l1.内边内边距距l语法：语法：padding-top:auto|length padding-right:auto|length padding-bottom:auto|length padding-left:auto|length padding:14 auto|lengthl参数：参数：auto：浏览器计算内边距。：浏览器计算内边距。le

20、ngth：内边距值，常用取值单位为像素：内边距值，常用取值单位为像素px，默认值是，默认值是 0px，不能为负数。，不能为负数。HTML5+CSS3网页设计基础第6章 CSS盒子模型6.2.4 盒模型边距属性盒模型边距属性l2.外边距外边距l语法：语法：margin-top:auto|length margin-right:auto|length margin-bottom:auto|length margin-left:auto|length margin:14 auto|length l参数：参数：lauto：浏览器计算外边距，设置为对边的值。：浏览器计算外边距，设置为对边的值。lleng

21、th：外边距值，常用取值单位为像素：外边距值，常用取值单位为像素px，默认值是，默认值是 0px。可以为负数。可以为负数。l参考参考示例示例6-2-10.html第21页HTML5+CSS3网页设计基础第6章 CSS盒子模型6.2.5 案例制作案例制作l制作完成演示案例制作完成演示案例:首页首页企业新闻局部页面。企业新闻局部页面。l参考代码参考代码 6-2.html第22页HTML5+CSS3网页设计基础第6章 CSS盒子模型6.3 背景属性背景属性 第23页本节主要内容：本节主要内容：l 案例分析案例分析l background 属性属性l CSS渐变背景渐变背景l 背景和图像的透明度背景和

22、图像的透明度l 案例著作案例著作HTML5+CSS3网页设计基础第6章 CSS盒子模型6.3.1 案例案例分析分析l【案例展示】【案例展示】使用使用CSS文本、图片和背景的知识，设计网文本、图片和背景的知识，设计网页头部局部页面页头部局部页面，显示，显示效果如效果如图图所示所示。l【知识要点】【知识要点】盒子背景颜色、背景图片、渐变背景的设置。盒子背景颜色、背景图片、渐变背景的设置。l【学习目标】掌握设置盒子背景属性的方法。【学习目标】掌握设置盒子背景属性的方法。第24页HTML5+CSS3网页设计基础第6章 CSS盒子模型6.3.2 background 属性属性background用于设置

23、元素盒子的背景用于设置元素盒子的背景属性属性，可以可以设置如下设置如下属性属性lbackground-color：设置背景颜色。：设置背景颜色。lbackground-image：设置背景图像。：设置背景图像。lbackground-repeat:设置如何平铺背景图像。设置如何平铺背景图像。lbackground-position:设置背景图像的位置。设置背景图像的位置。lbackground-size:设置背景图像的尺寸。设置背景图像的尺寸。lbackground-origin:设置背景图像的定位区域。设置背景图像的定位区域。lbackground-clip：设置背景的绘制区域。：设置背景的

24、绘制区域。lbackground-attachment：设置背景图像是否固定或随页面滚：设置背景图像是否固定或随页面滚动。动。第25页HTML5+CSS3网页设计基础第6章 CSS盒子模型6.3.2 background 属性属性l1.background-color（背景颜色）（背景颜色）l语法语法:background-color:color|transparentl参数参数:color：指定颜色，可使用预定义的颜色值、十六进制：指定颜色，可使用预定义的颜色值、十六进制#RRGGBB或或RGB代码代码rgb(r,g,b)。transparent：默认值，即背景透明，此时子元素会显示：默认值

25、，即背景透明，此时子元素会显示其父元素的背景。其父元素的背景。l示例：示例：/*rgb背景颜色背景颜色*/background-color:rgb(220,230,230);参考示例参考示例：6-3-1.html第26页HTML5+CSS3网页设计基础第6章 CSS盒子模型6.3.2 background 属性属性l2.background-image（背景图像）（背景图像）l语法语法:background-image:url(ur)|nonel参数参数:url表示要插入背景图片的路径。表示要插入背景图片的路径。none表示不加载图片。表示不加载图片。l示例：给示例：给标签设置背景标签设置背景

26、 body background-image:url(img/bg1.jpg参考示例参考示例：6-3-2.html第27页HTML5+CSS3网页设计基础第6章 CSS盒子模型6.3.2 background 属性属性l3.background-repeat（设置背景平铺）（设置背景平铺）l语法：语法：background-repeat:repeat|no-repeat|repeat-x|repeat-yl参数：参数：repeat：沿水平和竖直两个方向平铺：沿水平和竖直两个方向平铺(默认值默认值)。no-repeat:不平铺不平铺(图像位于元素的左上角，只显示一个图像位于元素的左上角，只显示一

27、个)。repeat-x:只沿水平方向平铺。只沿水平方向平铺。repeat-y:只沿竖直方向平铺。只沿竖直方向平铺。l参考示例参考示例：6-3-3.html，6-3-4.html第28页HTML5+CSS3网页设计基础第6章 CSS盒子模型6.3.2 background 属性属性l4.background-position（设置背景位置）（设置背景位置）l语法语法：background-position:length|length 或或background-position:position|positionl参数：参数：length：百分比或者由数字和单位标识符组成的长度值。：百分比或者由数

28、字和单位标识符组成的长度值。position：top、center、bottom、left、center、right之一之一。l示例：示例：background-position:30px 50px;l参考示例参考示例：6-3-5.html第29页HTML5+CSS3网页设计基础第6章 CSS盒子模型6.3.2 background 属性属性l5.background-size（设置背景设置背景图像的尺寸）图像的尺寸）l语法：语法：background-size:length|percentage|cover|containl参数：参数：length：设置背景图像的高度和宽度：设置背景图像的高

29、度和宽度。percentage：以父元素的百分比来设置背景图像的宽度和高度：以父元素的百分比来设置背景图像的宽度和高度。cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域域。contain：把背景图像扩展至最大尺寸，以使其宽度和高度完全适：把背景图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域应内容区域。l参考示例：参考示例：6-3-6.html第30页HTML5+CSS3网页设计基础第6章 CSS盒子模型6.3.2 background 属性属性l6.background-clip(设置设置背景图像背景图像的的显示显示区域

30、区域)l语法：语法：background-clip:border-box|padding-box|content-boxl参数：参数：border-box：设置：设置背景背景显示显示到到盒子边框。盒子边框。padding-box：设置：设置背景背景显示显示到到盒子内边距。盒子内边距。content-box：设置：设置背景背景显示在显示在内容内容区域区域。l参考示例：参考示例：6-3-7.html，背景显示到边框。，背景显示到边框。第31页HTML5+CSS3网页设计基础第6章 CSS盒子模型6.3.2 background 属性属性l7.background-attachment（设置背景图像

31、是否固定或设置背景图像是否固定或随页面滚动）随页面滚动）l语法：语法：background-attachment:scroll|fixed l参数：参数：scroll：默认值。背景图像会随着页面的滚动而移动。：默认值。背景图像会随着页面的滚动而移动。fixed：背景图像固定，当页面滚动时背景图像不会：背景图像固定，当页面滚动时背景图像不会移动移动l参考示例：参考示例：6-3-8.html第32页HTML5+CSS3网页设计基础第6章 CSS盒子模型6.3.2 background 属性属性l8.background-origin（设置背景图片的定位区域）（设置背景图片的定位区域）l语法：语法：

32、background-origin:border-box|padding-box|content-boxl参数：参数：border-box：设置背景从边框开始绘制。：设置背景从边框开始绘制。padding-box：设置背景在边框内部绘制（不包括边框：设置背景在边框内部绘制（不包括边框）content-box：设置背景从内容部分绘制。：设置背景从内容部分绘制。第33页HTML5+CSS3网页设计基础第6章 CSS盒子模型6.3.2 background 属性属性l9.background（设置背景复合属性）（设置背景复合属性）l设置设置背景样式的语法格式如下。背景样式的语法格式如下。backgr

33、ound:background-color background-image background-repeatbackground-position background-sizebackground-clip background-attachment l在上面的语法格式中，各个样式顺序任意，对于不需要的在上面的语法格式中，各个样式顺序任意，对于不需要的样式可以省略样式可以省略。l参考示例：参考示例：6-3-9.html第34页HTML5+CSS3网页设计基础第6章 CSS盒子模型6.3.2 background 属性属性l10.设置多重背景图像设置多重背景图像lCSS3中增强了背景图像的

34、功能，允许一个盒子里显示多中增强了背景图像的功能，允许一个盒子里显示多个背景图像，使背景图像效果更容易控制。实现方法是通个背景图像，使背景图像效果更容易控制。实现方法是通过过background-image、background-repeat、background-position和和 background-size等属性提供多等属性提供多个属性值来实现多重背景图像效果，各属性值之间用逗号个属性值来实现多重背景图像效果，各属性值之间用逗号隔开隔开。l参考示例：参考示例：6-3-10.html第35页HTML5+CSS3网页设计基础第6章 CSS盒子模型6.3.3 CSS渐变渐变背景背景l1.线

35、性渐变线性渐变l在线性渐变过程中，指定颜色从起始颜色开始沿着渐变方在线性渐变过程中，指定颜色从起始颜色开始沿着渐变方向按顺序过渡到结束颜色。向按顺序过渡到结束颜色。l语法：语法：background:linear-gradient(direction|angle,color1 position1,colorn positionn)l参数：参数：ldirection:“to”加加“left”、“right”、“top”和和“bottom”等关键词，表示渐变方向。等关键词，表示渐变方向。第36页HTML5+CSS3网页设计基础第6章 CSS盒子模型6.3.3 CSS渐变背景渐变背景langle：渐

36、变角度，单位：渐变角度，单位deg，指水平线与渐变线之间的，指水平线与渐变线之间的角度，以顺时针方向旋转。角度，以顺时针方向旋转。0deg 创建一个从底部到顶部创建一个从底部到顶部的垂直渐变，的垂直渐变，90deg时创建一个从左到右的水平渐变。时创建一个从左到右的水平渐变。lcolor：颜色值，用于设置渐变颜色，其中：颜色值，用于设置渐变颜色，其中“color1”表表示起始颜色，示起始颜色，“colorn”表示结束颜色，起始颜色和结束表示结束颜色，起始颜色和结束颜色之间可以添加多个颜色值，各颜色值之间用颜色之间可以添加多个颜色值，各颜色值之间用“，”隔隔开。开。lposition：颜色停止位置

37、，一般使用百分比位置：颜色停止位置，一般使用百分比位置。l参考示例：参考示例：6-3-11.html第37页HTML5+CSS3网页设计基础第6章 CSS盒子模型6.3.3 CSS渐变背景渐变背景l2.重复线性渐变重复线性渐变l语法：语法：background:repeating-linear-gradient(direction|angle,color1 position1,colorn positionn)l参数：参考线性渐变的参数参数：参考线性渐变的参数。l参考示例：参考示例：6-3-12.html第38页HTML5+CSS3网页设计基础第6章 CSS盒子模型6.3.3 CSS渐变背景渐

38、变背景l3.径向渐变径向渐变l径向渐变是网页中另一种常用的渐变径向渐变是网页中另一种常用的渐变,在径向渐变过程中在径向渐变过程中,起始颜色会从一个中心点开始起始颜色会从一个中心点开始,依据椭圆或圆形形状进行依据椭圆或圆形形状进行扩张渐变。扩张渐变。l语法：语法：background:radial-gradient(shape center,color1posintion1,.,colornpositionn)l参数：参数：lshape：定义形状，取值：定义形状，取值 circle（圆形）或（圆形）或 ellipse（椭（椭圆形）。默认值是圆形）。默认值是 ellipse。第39页HTML5+C

39、SS3网页设计基础第6章 CSS盒子模型6.3.3 CSS渐变背景渐变背景lcenter：渐变的中心位置，使用：渐变的中心位置，使用“at”加上关键词或参数加上关键词或参数值来定义径向渐变的中心位置。圆心的横坐标取值可以是值来定义径向渐变的中心位置。圆心的横坐标取值可以是百分数、像素值、百分数、像素值、left、center、right;圆心的纵坐标值可圆心的纵坐标值可以是百分数、像素值、以是百分数、像素值、top、center、bottom。省略参数。省略参数时，默认时，默认center。lcolor：参考线性渐变。：参考线性渐变。lposition：参考线性渐变：参考线性渐变。l参考示例：

40、参考示例：6-3-13.html第40页HTML5+CSS3网页设计基础第6章 CSS盒子模型6.3.3 CSS渐变背景渐变背景l4.重复径向渐变重复径向渐变l语法：语法：background:repeating-radial-gradient(shape center,color1posintion1,.,colornpositionn)l参数：参考径向渐变参数讲解参数：参考径向渐变参数讲解。l参考示例：参考示例：6-3-14.html第41页HTML5+CSS3网页设计基础第6章 CSS盒子模型6.3.4 背景和图像不透明度背景和图像不透明度设置设置l1.RGBA模式模式lRGBA是是CS

41、S3新增的颜色模式新增的颜色模式,它是它是RGB颜色模式的延伸颜色模式的延伸,该模式是在红、绿、蓝三原色的基础上添加了不透明度该模式是在红、绿、蓝三原色的基础上添加了不透明度参数。参数。l语法：语法：rgba(r,g,b,a)l参数：参数：r：红色值，取值：红色值，取值0255|0%100%.g：绿色值，取值：绿色值，取值0255|0%100%.b：蓝色值，取值：蓝色值，取值0255|0%100%.a：alpha透明度。取值透明度。取值0.0(完全透明完全透明)和和1.0(完全不透明完全不透明)之之间的数字。间的数字。第42页HTML5+CSS3网页设计基础第6章 CSS盒子模型6.3.4 背

42、景和图像不透明度设置背景和图像不透明度设置l2.opacity属性属性l在在CSS3中，可以使用中，可以使用opacity属性设置元素呈现出透明效属性设置元素呈现出透明效果。果。语法语法：opacity:valuel参数：参数：value：不透明度的值，取值：不透明度的值，取值0.0（完全透明）和（完全透明）和1.0(完全完全不透明不透明)之间的数字。之间的数字。l参考示例：参考示例：6-3-15.html第43页HTML5+CSS3网页设计基础第6章 CSS盒子模型6.3.5 案例制作案例制作l制作完成演示案例制作完成演示案例:设计网页头部局部页面设计网页头部局部页面。l参考代码参考代码 6

43、-3.html第44页HTML5+CSS3网页设计基础第6章 CSS盒子模型6.4 实训实训l【实训任务】创设计网站头部和导航局部页面【实训任务】创设计网站头部和导航局部页面。l【知识要点】【知识要点】HIML5表单及其属性、表单元素及其属性、表单及其属性、表单元素及其属性、CSS控制表单样式。控制表单样式。l【实训目标】掌握盒模型各属性的功能，并能通过定义盒【实训目标】掌握盒模型各属性的功能，并能通过定义盒模型的各个属性实现页面美化；掌握背景颜色和背景图像模型的各个属性实现页面美化；掌握背景颜色和背景图像的定义方法，并能对页面元素进行背景设计。的定义方法，并能对页面元素进行背景设计。第45页

44、HTML5+CSS3网页设计基础第6章 CSS盒子模型第46页6.5 本章小结本章小结 l本章全面讲述了盒模型的各种属性及其设置方法本章全面讲述了盒模型的各种属性及其设置方法。l首先首先，介绍了盒模型的基本概念，介绍了盒模型的基本概念。l接下来接下来，介绍了盒子的各种外观属性及其设置方法，包括，介绍了盒子的各种外观属性及其设置方法，包括盒子的宽和高、边框属性、边距属性等盒子的宽和高、边框属性、边距属性等。l之后之后，介绍了盒子的背景属性及其设置方法，包括背景颜，介绍了盒子的背景属性及其设置方法，包括背景颜色、背景图像、渐变背景等色、背景图像、渐变背景等。l最后最后，通过案例制作，演示了在网页中灵活设置元素盒子，通过案例制作，演示了在网页中灵活设置元素盒子的各种属性达到理性的显示效果。的各种属性达到理性的显示效果。