Web前端開發(fā)項(xiàng)目教程主講人：卞孝麗1.1課程導(dǎo)論項(xiàng)目5美化傳統(tǒng)文化網(wǎng)任務(wù)5.1創(chuàng)作畫像展及圖片邊框

任務(wù)5.2添加創(chuàng)意漸變色與多重圖像背景目錄任務(wù)5.1創(chuàng)作畫像展及圖片邊框【任務(wù)效果圖】

【任務(wù)效果圖】★

5.1.1認(rèn)識(shí)盒子模型

★

5.1.2盒子的外邊距與內(nèi)邊距★

5.1.3盒子的寬與高【任務(wù)效果圖】★

5.1.4盒子的邊框★

5.1.5盒子的輪廓★5.1.6盒子的陰影

內(nèi)陰影頭像

多重內(nèi)陰影頭像【任務(wù)效果圖】★5.1.7CSS3新增盒子模型屬性

四角半徑參數(shù)關(guān)系

圓角邊框效果

邊框圖片素材

平鋪圖片邊框效果

拉伸圖片邊框效果

利用盒子的邊框、輪廓、陰影屬性制作圓角內(nèi)發(fā)光頭像【任務(wù)目標(biāo)】知識(shí)目標(biāo)掌握使用border復(fù)合屬性設(shè)置盒子的邊框，使用outline復(fù)合屬性設(shè)置盒子的輪廓，使用box-shadow屬性添加盒子的陰影，以及使用opacity屬性等多種設(shè)置透明效果的方法。能力目標(biāo)

能夠應(yīng)用盒子模型的各種規(guī)律和特征控制頁(yè)面元素的顯示、布局排版網(wǎng)站頁(yè)面；提升觀察和判斷能力，會(huì)使用盒子屬性美化頁(yè)面元素、制作常見的盒子模型效果。素質(zhì)目標(biāo)

培養(yǎng)耐心細(xì)致、精益求精的品質(zhì)；提升網(wǎng)頁(yè)制作中的空間感以及創(chuàng)新意識(shí)?！緦?dǎo)學(xué)知識(shí)】一、盒子邊框?qū)傩员鞢SS常見邊框?qū)傩约罢f明設(shè)置內(nèi)容樣式屬性取值說明上邊框border-top-width:寬度；寬度取值：可以將寬度設(shè)置為特定大?。ㄒ詐x、pt、cm、em計(jì)），也可以使用預(yù)定義值：thin、medium或thickborder-top-style:樣式；border-top-color:顏色；下邊框border-bottom-style:樣式；樣式取值：none沒有邊框，即忽略所有邊框的寬度（默認(rèn)值）；solid單實(shí)線；dashed虛線；dotted點(diǎn)線；double雙實(shí)線border-bottom-width:寬度；border-bottom-color:顏色；左邊框border-left-style:樣式；顏色取值：顏色名，比如"red"；十六進(jìn)制值，比如"#ff0000"；RGB值，比如"rgb(255,0,0)"；HSL值，比如"hsl(0,100%,50%)"；transparentborder-left-width:寬度；border-left-color:顏色；右邊框border-right-style:樣式；單屬性的值可以按上、右、下、左的順序給4個(gè)邊賦值(中間以空格隔開)，1個(gè)值為4邊，2個(gè)值為上下/左右，3個(gè)值為上/左右/下border-right-width:寬度；border-right-color:顏色；單屬性border-width:上[右下左]在設(shè)置邊框?qū)挾然蝾伾珪r(shí)，必須同時(shí)設(shè)置邊框樣式，如果未設(shè)置樣式或設(shè)置為none，則不論設(shè)置為任何值都無效border-style:上[右下左]border-color:上[右下左]綜合border-top:寬度樣式顏色；邊框的默認(rèn)顏色為元素本身的文本顏色，若元素內(nèi)沒有文本則為父元素的文本顏色。綜合設(shè)置時(shí)，寬度、樣式、顏色順序任意，可以只指定需要的屬性，省略的部分將取默認(rèn)值（樣式不能省略）border-right:寬度樣式顏色；border-bottom:寬度樣式顏色；border-left:寬度樣式顏色；border:四邊寬度四邊樣式四邊顏色【導(dǎo)學(xué)知識(shí)】二、盒子輪廓屬性

輪廓是在元素周圍繪制的一條線，在邊框之外，以凸顯元素。CSS擁有如下輪廓屬性：outline-style（必需）指定輪廓的樣式，outline-color設(shè)置輪廓的顏色，outline-width指定輪廓的寬度，outline-offset在元素的輪廓與邊框之間添加透明空間，outline用于設(shè)置輪廓樣式、顏色、寬度中一個(gè)、兩個(gè)或三個(gè)值的簡(jiǎn)寫屬性。

注意輪廓與邊框不同：輪廓是在元素邊框之外繪制的，并且可能與其他內(nèi)容重疊；輪廓不是元素尺寸的一部分，元素的總寬度和高度不受輪廓線寬度的影響?！緦?dǎo)學(xué)知識(shí)】三、盒子陰影屬性

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【導(dǎo)學(xué)知識(shí)】三、盒子陰影屬性

表box-shadow屬性的參數(shù)及說明參數(shù)說明h-shadow表示水平陰影的位置，允許負(fù)值（必選屬性）v-shadow表示垂直陰影的位置，允許負(fù)值（必選屬性）blur模糊距離（可選屬性）spread陰影尺寸，不能為負(fù)值（可選屬性）color陰影顏色（可選屬性）inset將默認(rèn)“outset”外陰影類型更改為“inset”內(nèi)陰影（可選屬性）【導(dǎo)學(xué)知識(shí)】三、盒子陰影屬性

box-shadow屬性可以為框添加一個(gè)或多個(gè)陰影，其語法格式如下所示：box-shadow:h-shadowv-shadowblurspreadcolorinset;【導(dǎo)學(xué)知識(shí)】三、盒子陰影屬性原始素材touxiang.jpeg圓角內(nèi)發(fā)光頭像【任務(wù)小結(jié)】

我們可以靈活設(shè)置盒子的邊框、輪廓、陰影屬