Web前端开发项目教程 课件 5.1.2 认识盒子模型及其外边距内边距宽高

Web前端开发项目教程主讲人：卞孝丽1.1课程导论项目5美化传统文化网任务5.1创作画像展及图片边框

任务5.2添加创意渐变色与多重图像背景目录任务5.1创作画像展及图片边框【任务效果图】

【任务效果图】★

5.1.1认识盒子模型

★

5.1.2盒子的外边距与内边距★

5.1.3盒子的宽与高【任务效果图】★

5.1.4盒子的边框★

5.1.5盒子的轮廓★5.1.6盒子的阴影

内阴影头像

多重内阴影头像【任务效果图】★5.1.7CSS3新增盒子模型属性

四角半径参数关系

圆角边框效果

边框图片素材

平铺图片边框效果

拉伸图片边框效果

利用盒子的边框、轮廓、阴影属性制作圆角内发光头像【任务目标】知识目标掌握使用border复合属性设置盒子的边框，使用outline复合属性设置盒子的轮廓，使用box-shadow属性添加盒子的阴影，以及使用opacity属性等多种设置透明效果的方法。能力目标

能够应用盒子模型的各种规律和特征控制页面元素的显示、布局排版网站页面；提升观察和判断能力，会使用盒子属性美化页面元素、制作常见的盒子模型效果。素质目标

培养耐心细致、精益求精的品质；提升网页制作中的空间感以及创新意识。【导学知识】一、盒子边框属性表CSS常见边框属性及说明设置内容样式属性取值说明上边框border-top-width:宽度；宽度取值：可以将宽度设置为特定大小（以px、pt、cm、em计），也可以使用预定义值：thin、medium或thickborder-top-style:样式；border-top-color:颜色；下边框border-bottom-style:样式；样式取值：none没有边框，即忽略所有边框的宽度（默认值）；solid单实线；dashed虚线；dotted点线；double双实线border-bottom-width:宽度；border-bottom-color:颜色；左边框border-left-style:样式；颜色取值：颜色名，比如"red"；十六进制值，比如"#ff0000"；RGB值，比如"rgb(255,0,0)"；HSL值，比如"hsl(0,100%,50%)"；transparentborder-left-width:宽度；border-left-color:颜色；右边框border-right-style:样式；单属性的值可以按上、右、下、左的顺序给4个边赋值(中间以空格隔开)，1个值为4边，2个值为上下/左右，3个值为上/左右/下border-right-width:宽度；border-right-color:颜色；单属性border-width:上[右下左]在设置边框宽度或颜色时，必须同时设置边框样式，如果未设置样式或设置为none，则不论设置为任何值都无效border-style:上[右下左]border-color:上[右下左]综合border-top:宽度样式颜色；边框的默认颜色为元素本身的文本颜色，若元素内没有文本则为父元素的文本颜色。综合设置时，宽度、样式、颜色顺序任意，可以只指定需要的属性，省略的部分将取默认值（样式不能省略）border-right:宽度样式颜色；border-bottom:宽度样式颜色；border-left:宽度样式颜色；border:四边宽度四边样式四边颜色【导学知识】二、盒子轮廓属性

轮廓是在元素周围绘制的一条线，在边框之外，以凸显元素。CSS拥有如下轮廓属性：outline-style（必需）指定轮廓的样式，outline-color设置轮廓的颜色，outline-width指定轮廓的宽度，outline-offset在元素的轮廓与边框之间添加透明空间，outline用于设置轮廓样式、颜色、宽度中一个、两个或三个值的简写属性。

注意轮廓与边框不同：轮廓是在元素边框之外绘制的，并且可能与其他内容重叠；轮廓不是元素尺寸的一部分，元素的总宽度和高度不受轮廓线宽度的影响。【导学知识】三、盒子阴影属性

1.text-shadow

text-shadow:2px2pxred;text-shadow:2px2px5pxred;只指定水平阴影（2px）和垂直阴影（2px）向阴影添加模糊效果（5px）text-shadow:1px1px2pxblack,0025pxblue,005pxdarkblue;text-shadow:-1px0black,01pxblack,1px0black,0-1pxblack;

2.box-shadow【导学知识】三、盒子阴影属性

表box-shadow属性的参数及说明参数说明h-shadow表示水平阴影的位置，允许负值（必选属性）v-shadow表示垂直阴影的位置，允许负值（必选属性）blur模糊距离（可选属性）spread阴影尺寸，不能为负值（可选属性）color阴影颜色（可选属性）inset将默认“outset”外阴影类型更改为“inset”内阴影（可选属性）【导学知识】三、盒子阴影属性

box-shadow属性可以为框添加一个或多个阴影，其语法格式如下所示：box-shadow:h-shadowv-shadowblurspreadcolorinset;【导学知识】三、盒子阴影属性原始素材touxiang.jpeg圆角内发光头像【任务小结】

我们可以灵活设置盒子的边框、轮廓、阴影属