HTML5+CSS3網(wǎng)頁設(shè)計(jì)與制作課件：美化頁面元素背景

HTML5+CSS3網(wǎng)頁設(shè)計(jì)與制作美化頁面元素背景能使用CSS的background-color屬性設(shè)置標(biāo)簽的純色背景。能使用background各個(gè)屬性設(shè)置背景圖像及其樣式效果。能使用linear-gradient、radial-gradient為背景添加漸變效果。能使用background的相關(guān)屬性設(shè)置多背景圖像效果。綜合運(yùn)用背景樣式設(shè)置D清單頁面元素背景。任務(wù)目標(biāo)

美化頁面元素背景本次任務(wù)要求根據(jù)D清單頁面效果圖，使用CSS樣式代碼，在的基礎(chǔ)上美化網(wǎng)頁元素背景。任務(wù)包括：1、D清單頁面中的home、apply、member、contact模塊設(shè)置對應(yīng)的背景樣式。2、member模塊背景圖片鋪滿整個(gè)模塊，并相對于窗體固定。3、根據(jù)不同的背景色去修改文字的顏色及水平線的設(shè)置。任務(wù)描述

美化頁面元素背景要完成D清單頁面元素的背景美化，需要：學(xué)習(xí)添加背景顏色、背景圖片的CSS語法；學(xué)習(xí)設(shè)置背景圖片相關(guān)樣式的語法；分析D清單頁面中的元素背景，正確選擇及使用相關(guān)的背景樣式完成D清單網(wǎng)頁中的各元素背景效果。D清單網(wǎng)頁背景效果分析如圖2-4-1所示。任務(wù)分析

美化頁面元素背景任務(wù)分析圖2-4-1D清單美化元素背景網(wǎng)頁效果圖

美化頁面元素背景知識(shí)與技能準(zhǔn)備background-color屬性設(shè)置元素的背景顏色，該屬性是設(shè)置元素的一種純色的顏色。這個(gè)屬性會(huì)填充元素的內(nèi)容、內(nèi)邊距和邊框區(qū)域。語法：background-color:transparent|color;transparent：默認(rèn)值，透明色。取值：顏色關(guān)鍵詞|十六進(jìn)制顏色值|RGB色|RGBA色顏色關(guān)鍵詞：如red、green、blue等顏色對應(yīng)的英文單詞。十六進(jìn)制顏色值：如#FF0000、#0F0等以#開頭的十六進(jìn)制數(shù)值。RGB色：如rgb(255,0,0)、rgb(0,255,0)、rgb(0,0,255)等rgb代碼的顏色值。RGBA色：和RGB相似，但比RGB多了一個(gè)透明的參數(shù)值，透明的參數(shù)值取值范圍是0~1之間，如rgba(255,0,0,0.5)。1、background-color：背景顏色課堂練習(xí)2-4-1使用背景顏色屬性設(shè)置背景顏色HTML代碼：CSS代碼：12背景顏色<br>background-color:paleturquoise;123body{background-color:paleturquoise;}使用背景顏色屬性設(shè)置背景顏色。顯示效果如圖2-4-2所示：圖2-4-2背景顏色效果知識(shí)與技能準(zhǔn)備background-image屬性設(shè)置元素的背景圖像，這個(gè)屬性占據(jù)了元素的內(nèi)邊距和邊框區(qū)域，但不包括外邊距。如果同時(shí)設(shè)置了背景圖像和背景顏色，背景圖片會(huì)覆蓋背景顏色。背景圖像默認(rèn)位于所設(shè)置元素的左上角，并在水平和垂直方向上重復(fù)。

取值：默認(rèn)值是none，圖片路徑可以是絕對或相對路徑。而這里的相對路徑是相對于樣式表的。一般網(wǎng)站都會(huì)建一個(gè)圖片文件夾images（或img），將圖片都放在該文件夾中，建一個(gè)樣式CSS文件夾，用于存放樣式文件，如圖2-4-3所示的文件夾結(jié)構(gòu)，則地址應(yīng)該寫為“url(images/test.jpg)”。圖2-4-3網(wǎng)站結(jié)構(gòu)圖注意：背景圖片中的URL導(dǎo)入的圖像可以是任意類型的，但是符合網(wǎng)頁顯示的格式一般為jpg、gif和png。2、background-image：背景圖像語法：background-image:url(圖片路徑);使用背景顏色屬性設(shè)置背景顏色。課堂練習(xí)2-4-2使用背景圖像屬性設(shè)置背景圖像HTML代碼：CSS代碼：1background-image:背景圖像123body{background-image:url(images/img.jpg);}顯示效果如圖2-4-4所示：圖2-4-4背景圖像效果知識(shí)與技能準(zhǔn)備background-repeat屬性設(shè)置元素背景圖像的顯示方式是否重復(fù)及如何重復(fù)，該屬性默認(rèn)狀態(tài)下背景圖像是在水平和垂直方向上進(jìn)行重復(fù)。

取值：repeat-x|repeat-y|repeat|no-repeatrepeat：默認(rèn)狀態(tài)，背景圖像水平和垂直方向重復(fù)repeat-x：背景圖像水平方向重復(fù)repeat-y：背景圖像垂直方向重復(fù)no-repeat：背景圖像不重復(fù)3、background-repeat：背景圖像重復(fù)圖2-4-5背景圖像重復(fù)的設(shè)置語法：background-repeat:關(guān)鍵詞;知識(shí)與技能準(zhǔn)備background-position屬性設(shè)置元素背景圖像的起始位置，默認(rèn)狀態(tài)下背景圖像在元素的左上角顯示。取值：方位數(shù)值|方位關(guān)鍵詞方位數(shù)值：以%或px為單位的數(shù)值。方位數(shù)值可以是負(fù)值，圖像以元素的左上角為原點(diǎn)坐標(biāo)，按數(shù)值向水平方向或垂直方向上的偏移值。方位關(guān)鍵詞：left|center|right|top|bottom。如取值“l(fā)efttop”圖像位于元素標(biāo)簽的左上角開始排列，“centerright”圖像位于元素標(biāo)簽的右部居中位置開始排列。注意：該屬性一般填2個(gè)參數(shù)值，但CSS3已允許填寫4個(gè)值，參數(shù)值之間用空格隔開。方位數(shù)值與方位關(guān)鍵詞可以混合使用。4、background-position：背景圖像位置語法：background-position:水平方向值垂直方向值;知識(shí)與技能準(zhǔn)備填寫一個(gè)參數(shù)值，該值用于水平方向值，垂直方向值將默認(rèn)為50%（即center）。填寫兩個(gè)參數(shù)值，第一個(gè)用于水平方向，第二個(gè)用于垂直方向。填寫三個(gè)參數(shù)值，必須至少有一個(gè)是方位關(guān)鍵詞，有一個(gè)是偏移值，偏移值必須跟在方位關(guān)鍵詞后面，正確填寫如：left10pxbottom;錯(cuò)誤填寫如：10pxleftbottom。填寫四個(gè)參數(shù)值，就是兩個(gè)方位關(guān)鍵詞，兩個(gè)偏移值，同樣偏移值必須跟在方位關(guān)鍵詞后面，如：left10pxbottom10px。4、background-position：背景圖像位置圖2-4-6背景圖像位置的設(shè)置如下圖提供的圖片素材（160px×160px），在這圖片中整合了4×4共16個(gè)圖標(biāo)，每個(gè)圖標(biāo)的大小都是40px×40px。在網(wǎng)頁中設(shè)置多個(gè)40px×40px的塊標(biāo)簽，并將塊標(biāo)簽設(shè)置成圓形的邊框，使用背景屬性將圖片中特定的圖標(biāo)分別顯示在每個(gè)塊標(biāo)簽中。課堂練習(xí)2-4-3使用背景屬性顯示特定的圖標(biāo)圖2-4-7素材圖片極塊標(biāo)簽效果步驟1：制作多個(gè)相同樣式的div標(biāo)簽，設(shè)置相同的樣式和背景圖片。課堂練習(xí)2-4-3使用背景屬性顯示特定的圖標(biāo)圖2-4-8背景圖標(biāo)設(shè)置效果HTML代碼：CSS代碼：1234567<!--ico為標(biāo)簽的通用樣式選擇符，ico1、2、3為獨(dú)立樣式--><divclass="icoico1"></div><divclass="icoico2"></div><divclass="icoico3"></div><divclass="icoico4"></div><divclass="icoico5"></div>123456789.ico{background-image:url(img/ico.jpg);margin:5px;height:40px;width:40px;float:left;/*浮動(dòng)*/border:2pxsolid#06f; /*2px藍(lán)色實(shí)線邊框*/border-radius:50%;/*圓形邊框*/}顯示效果如圖2-4-8所示：步驟2：根據(jù)圖標(biāo)的位置屬性，更改坐標(biāo)位置參數(shù)，顯示特定的圖標(biāo)。課堂練習(xí)2-4-3使用背景屬性顯示特定的圖標(biāo)圖2-4-9背景圖標(biāo)設(shè)置最終效果CSS代碼：123456789/*顯示第1行第3排的圖標(biāo)*/.ico1{background-position:-80px0;}/*顯示第4行第3排的圖標(biāo)*/.ico2{background-position:-80px40px;}/*顯示第4行第1排的圖標(biāo)*/.ico3{background-position:0px40px;}/*顯示第4行第4排的圖標(biāo)*/.ico4{background-position:40px40px;}/*顯示第4行第2排的圖標(biāo)*/.ico5{background-position:-40px-120px;}顯示效果如圖2-4-8所示：知識(shí)與技能準(zhǔn)備background-size屬性是指定背景圖像的大小，在CSS3之前背景圖像的大小是由圖片的實(shí)際大小決定的，以CSS3可以規(guī)定背景圖像的大小。取值：縮放數(shù)值|關(guān)鍵詞縮放數(shù)值：以px為單位，用長度值指定背景圖像的大小。以%為單位，用百分比指定背景圖像的大小，這個(gè)百分比是相對于父標(biāo)簽的寬高的百分比。該縮放數(shù)值不允許為負(fù)值。關(guān)鍵詞：auto|cover|containauto：默認(rèn)值，背景圖像的真實(shí)大小。cover：將背景圖像等比縮放到鋪滿標(biāo)簽，背景圖像有可能超出標(biāo)簽范圍。contain：將背景圖像等比縮放到寬度或高度與標(biāo)簽的寬度或高度相等，背景圖像始終被包含在標(biāo)簽內(nèi)，在標(biāo)簽中可看到全部圖像內(nèi)容。5、background-size：背景圖像大小語法： background-size:值;知識(shí)與技能準(zhǔn)備注意：如果只寫一個(gè)參數(shù)值，用于指定背景圖像的寬度，第2個(gè)值默認(rèn)為auto，這時(shí)背景圖像是以填寫的寬度作為參照等比例縮放。如果填寫2個(gè)參數(shù)值，第1個(gè)指定背景圖像的寬度，第2個(gè)指定背景圖像的高度。cover、contain兩個(gè)關(guān)鍵詞不能填寫兩個(gè)參數(shù)值。5、background-size：背景圖像大小圖2-4-10背景圖像大小的設(shè)置知識(shí)與技能準(zhǔn)備默認(rèn)情況下，網(wǎng)頁文檔比較長時(shí)在向下滾動(dòng)時(shí)，背景圖像也會(huì)隨之滾動(dòng)。當(dāng)網(wǎng)頁文檔滾動(dòng)到超過圖像的位置時(shí)，圖像就會(huì)消失。通過background-attachment屬性可以防止這種滾動(dòng)。

取值：fixed|scroll|localfixed：背景圖像相對于窗體固定，網(wǎng)頁文檔滾動(dòng)時(shí)，圖片不會(huì)隨元素一起滾動(dòng)。scroll：默認(rèn)狀態(tài)，背景圖像相對于元素固定，網(wǎng)頁滾動(dòng)時(shí)，圖片會(huì)隨元素內(nèi)容一起滾動(dòng)。但元素內(nèi)部滾動(dòng)時(shí)，圖片不會(huì)隨元素內(nèi)容一起滾動(dòng)。local：背景圖像相對于元素內(nèi)容固定，標(biāo)簽內(nèi)容滾動(dòng)時(shí)，圖片會(huì)隨標(biāo)簽內(nèi)容一起移動(dòng)。6、background-attachment：背景圖像相對位置語法：background-attachment:關(guān)鍵詞;知識(shí)與技能準(zhǔn)備注意：在元素中設(shè)置了fixed效果，那在背景圖像的background-position、background-size屬性是以瀏覽器窗口作為基準(zhǔn)的。例如設(shè)置了“background-size:100%100%;”效果，那該背景圖像就會(huì)和瀏覽器窗口同樣大小，而“background-position:centercenter;”表示背景圖像放置在瀏覽器窗口的正中央。6、background-attachment：背景圖像相對位置圖2-4-11背景圖像相對于窗體固定效果圖2-4-12背景圖像相對于元素固定效果圖2-4-13背景圖像相對于元素內(nèi)容固定效果知識(shí)與技能準(zhǔn)備若要使多個(gè)標(biāo)簽水平排列，且可控制寬高，使用塊元素和內(nèi)聯(lián)元素都不能滿足，使用內(nèi)聯(lián)塊元素（inline-block）也不能精確的設(shè)置，這時(shí)需要使用CSS的浮動(dòng)屬性float。其中none表示元素不浮動(dòng)；left表示元素向左浮動(dòng)；right表示元素向右浮動(dòng)。說明：設(shè)置了float屬性的標(biāo)簽display屬性將會(huì)失去效果（除了display：none），將采用新的排版規(guī)則，標(biāo)簽按設(shè)置的方向水平排列，標(biāo)簽之間頂端對齊，寬高可設(shè)置。例如：為練習(xí)2-3-4的<a>標(biāo)簽添加“float：left；”屬性，標(biāo)簽將從垂直排列變?yōu)樗脚帕小ｏ@示效果如圖2-3-9所示：如果將標(biāo)簽設(shè)置為“float：right；”標(biāo)簽將從右向左依次排列，如圖2-3-10所示（注意標(biāo)簽的排列順序）：7、使用float屬性設(shè)置標(biāo)簽的水平排列語法：float：none|left|right；圖2-3-9水平排列的超鏈接列表圖2-3-10從向右向左排列的超鏈接列表知識(shí)與技能準(zhǔn)備取值：border-box|padding-box|content-boxborder-box：從border（邊框）開始顯示背景圖像。padding-box：默認(rèn)值，從padding（內(nèi)補(bǔ)白）開始顯示背景圖像。content-box：從content（內(nèi)容）開始顯示背景圖像。7、使用float屬性設(shè)置標(biāo)簽的水平排列語法：background-origin:關(guān)鍵詞;圖2-4-14三個(gè)關(guān)鍵詞的范圍圖2-4-15背景圖像的開始顯示位置效果知識(shí)與技能準(zhǔn)備取值：border-box|padding-box|content-boxborder-box：默認(rèn)值，從外邊框開始剪切背景圖像。padding-box：從內(nèi)邊距開始剪切背景圖像。content-box：從內(nèi)容區(qū)開始剪切背景圖像。text：從前景內(nèi)容的形狀（如文字）作為裁剪區(qū)域向外裁剪，可實(shí)現(xiàn)使用背景圖像作為形狀的填充色遮罩效果。注意：遮罩效果只能有用于基于Webkit的瀏覽器。8、background-clip：背景圖像的開始剪切位置語法：background-clip:關(guān)鍵詞;圖2-4-16背景圖像的開始剪切位置效果知識(shí)與技能準(zhǔn)備取值：綜合屬性各值之間用空格隔開，各屬性值不分先后順序，但“位置/大小”兩個(gè)屬性必須按這個(gè)格式編寫，各個(gè)屬性值都可選填，如果不填寫就自動(dòng)設(shè)置成原屬性的默認(rèn)值。如圖2-4-17所示，這是與上面語法一一對應(yīng)的設(shè)置效果：9、background：背景綜合屬性語法：background:圖片路徑重復(fù)位置/大小相對位置開始顯示位置開始剪切位置顏色;圖2-4-17背景綜合屬性效果background:url(images/img.jpg)repeat-x00/300pxpadding-boxcontent-box#FAEBD7;課堂練習(xí)2-4-4制作網(wǎng)站關(guān)于我們首頁根據(jù)所提供的圖片素材制作如圖2-4-17所示效果的關(guān)于我們頁面，具體要求如下：窗體背景顏色為#F4F4F4，最小高度設(shè)置為900px。頁面主體部分占窗體寬的80%，高600px，距離窗體頂部70px，適當(dāng)添加填充產(chǎn)生間距，主體部分背景圖片相對于窗體固定，圖片頂部居中鋪滿標(biāo)簽。文章部分適當(dāng)添加填充產(chǎn)生間距，背景為透明度90%的明黃色rgba(252,220,0,0.9)，并在文章部分的背景中下部（偏移下部40px）添加圖標(biāo)圖片，圖片大小是50px；文章部分居中顯示在主體部分中。圖2-4-18網(wǎng)站關(guān)于我們首頁效果課堂練習(xí)2-4-4制作網(wǎng)站關(guān)于我們首頁HTML代碼：12345body{ margin:0;/*清除網(wǎng)頁邊距*/

background-color:#f4f4f4;min-height:900px;/*網(wǎng)頁最小高度*/}要設(shè)置窗體的背景，可通過<body>標(biāo)簽設(shè)置，CSS設(shè)置如下：課堂練習(xí)2-4-4制作網(wǎng)站關(guān)于我們首頁HTML代碼：CSS代碼：123<divclass="main">/*網(wǎng)頁主體標(biāo)簽*/</div>123456789.main{width:80%;height:600px;background:url(images/home-banner.jpg)topcenter/coverfixed;box-sizing:border-box; /*怪異盒模型*/margin:70pxauto;/*上下外邊界70px并水平居中*/padding:140px45px;}在<body>中添加一個(gè)標(biāo)簽設(shè)置網(wǎng)頁主體部分，網(wǎng)頁主體部分占窗體寬的80%，高600px，背景圖片頂部居中并鋪滿標(biāo)簽，相對于窗體固定，適當(dāng)添加填充產(chǎn)生間距，距離窗體頂部70px。課堂練習(xí)2-4-4制作網(wǎng)站關(guān)于我們首頁HTML代碼：CSS代碼：1234567891011<divclass="main">/*網(wǎng)頁主體標(biāo)簽*/<divclass="content"> <h1>ABOUTUS</h1> <p>Loremipsumdolorsitamet,Sedutperspiciatisundeomnisistenatuserrorsitvoluptatem.Loremipsumdolorsitamet,SedutperspiciatisundeomnisistenatuserrorsitvoluptatemLoremipsumdolorsitamet.</p> </div></div>1234567891011.content{text-align:center;/*文字居中*/background:rgba(252,220,0,0.9)url(images/arrow.png)no-repeatcenterbottom40px/50px;padding:30px30px100px;box-sizing:border-box;/*怪異盒模型*/}.contenth1{color:white;/*標(biāo)題文字白色*/}在主體部分添加文章部分內(nèi)容，文章部分適當(dāng)添加填充產(chǎn)生間距，背景為透明度90%的明黃色rgba(252,220,0,0.9)，并在文章部分的背景中下部（偏移下部40px）添加圖標(biāo)圖片，圖片大小是50px；文章部分居中顯示在主體部分中。顏色的透明度是通過Alpha值來控制的，所以這里需要使用rgba()色，通過最后一個(gè)參數(shù)的0-1的變化來控制透明度。知識(shí)與技能準(zhǔn)備漸變就是使用兩個(gè)或兩個(gè)以上的顏色搭配使用，制作出豐富的背景色，使背景更加絢麗多彩，從而減少圖片的使用數(shù)量，漸變效果具有很強(qiáng)的適應(yīng)性和可拓展性。雖然漸變是通過多個(gè)顏色的設(shè)置形成的背景，但是background-color只能做純色背景，所以漸變效果是作為background-image屬性添加到背景中的，所以不能和url()同時(shí)使用卻能和背景顏色一起使用。漸變效果可分為線性漸變、徑向漸變。10.1線性漸變：linear-gradient()線性漸變linear-gradient()是定義背景沿著某條直線朝一個(gè)方向產(chǎn)生漸變效果的。屬性background可通過顏色值linear-gradient()添加線性漸變的顏色，linear-gradient()類似于#FFF是一種顏色值數(shù)，并非屬性，需要配合background等其它屬性一起使用。取值：漸變方向：可使用角度（deg）或關(guān)鍵詞來進(jìn)行指定漸變方向，可不填，默認(rèn)方向?yàn)閺纳系较隆?0、使用CSS3添加漸變效果語法：linear-gradient(漸變方向,顏色值1位置點(diǎn)1,顏色值2位置點(diǎn)2,……)知識(shí)與技能準(zhǔn)備10、使用CSS3添加漸變效果圖2-4-19線性漸變效果課堂練習(xí)2-4-5制作關(guān)于我們網(wǎng)頁標(biāo)題的漸變色背景為練習(xí)2.4-4的關(guān)于我們標(biāo)題設(shè)置漸變色背景，漸變方向從左上角到右下角，顏色白色，透明度從80%漸變到0%再到80%，如圖2-4-20所示：漸變的參數(shù)可不填寫，默認(rèn)從標(biāo)簽的開頭位置漸變到尾部。圖2-4-20關(guān)于我們網(wǎng)頁標(biāo)題的漸變色效果CSS代碼：12345678.contenth1{ background:linear-gradient( 45deg, rgba(255,255,255,0.8), rgba(255,255,255,0)，rgba(255,255,255,0.8)

);}課堂練習(xí)2-4-6制作關(guān)于我們網(wǎng)頁文章內(nèi)容區(qū)的一個(gè)切角效果為練習(xí)2.4-4的關(guān)于我們文章內(nèi)容區(qū)制作切角效果，在內(nèi)容區(qū)左下角制作一個(gè)邊長為20px的直角三角形切角，如圖2-4-21所示：如果用漸變效果實(shí)現(xiàn)切角效果，原來的背景圖片就不能再使用，而這里運(yùn)用了透明色實(shí)現(xiàn)了切角效果。圖2-4-21關(guān)于我們網(wǎng)頁文章內(nèi)容區(qū)的一個(gè)切角效果CSS代碼：12345678910111213.content{text-align:center;margin:10px20px;background:linear-gradient(45deg,transparent20px,rgba(252,220,0,0.9)0);/*背景填充90%透明的明黃色，左上角20px的直角三角形透明色進(jìn)行遮罩*/padding:30px;box-sizing:border-box;/*怪異盒模型*/}知識(shí)與技能準(zhǔn)備10.2徑向漸變：radial-gradient()徑向漸變r(jià)adial-gradient()是定義背景從一個(gè)中心點(diǎn)開始沿四周產(chǎn)生圓形或橢圓形的漸變效果。徑向漸變相對于線性漸變要復(fù)雜，屬性參數(shù)更多更復(fù)雜。取值：漸變形狀：定義徑向漸變形狀的關(guān)鍵詞，有ellipse（默認(rèn)值）代表橢圓形，circle代表圓形。如果是正方形的元素，橢圓和圓形顯示是一樣的。漸變大?。憾x徑向漸變的結(jié)束形狀大小，可以填寫具體參數(shù)值，可選填，通常只填寫一個(gè)參數(shù)，代表圓形，填寫兩個(gè)參數(shù)，代表橢圓形?？蛇x填，如果不填寫，默認(rèn)值為farthest-cornor；也可以通過以下關(guān)鍵詞決定半徑取值：closest-side：指定徑向漸變的半徑長度為從圓心到離圓心最近的邊。closest-corner：指定徑向漸變的半徑長度為從圓心到離圓心最近的角。farthest-side：指定徑向漸變的半徑長度為從圓心到離圓心最遠(yuǎn)的邊。farthest-corner：指定徑向漸變的半徑長度為從圓心到離圓心最遠(yuǎn)的角。10、使用CSS3添加漸變效果語法：radial-gradient(漸變形狀漸變大小at圓心位置,顏色值1位置點(diǎn)1,顏色值2位置點(diǎn)2,……)知識(shí)與技能準(zhǔn)備圓心位置：決定圓或橢圓的圓心位置，前面必須添加at，可以使用px或%單位的數(shù)值，可以是負(fù)數(shù)，也可以使用方位關(guān)鍵詞。該參數(shù)可選填，如果不填寫，默認(rèn)取值為center。圓心位置有兩個(gè)參數(shù)，第一個(gè)是橫坐標(biāo)的值，第二個(gè)是縱坐標(biāo)的值，如果只寫一個(gè)參數(shù)，第二個(gè)默認(rèn)為center。各關(guān)鍵詞代表如下：left：指定左邊為徑向漸變圓心的橫坐標(biāo)值。center：指定中間為徑向漸變圓心的橫坐標(biāo)值或縱坐標(biāo)。right：指定右邊為徑向漸變圓心的橫坐標(biāo)值。top：指定頂部為徑向漸變圓心的縱坐標(biāo)值。bottom：指定底部為徑向漸變圓心的縱坐標(biāo)值。說明：顏色值和位置點(diǎn)用法和線性漸變一樣。10、使用CSS3添加漸變效果語法：radial-gradient(漸變形狀漸變大小at圓心位置,顏色值1位置點(diǎn)1,顏色值2位置點(diǎn)2,……)知識(shí)與技能準(zhǔn)備10、使用CSS3添加漸變效果圖2-4-22徑向漸變效果課堂練習(xí)2-4-7制作關(guān)于我們網(wǎng)頁文章內(nèi)容區(qū)的段落徑向漸變色背景為練習(xí)2-4-5的關(guān)于我們文章內(nèi)容區(qū)的段落設(shè)置徑向漸變色背景，如圖2-4-23所示，具體要求是橫向結(jié)束在原標(biāo)簽85%處，縱向結(jié)束在原標(biāo)簽的50%處，圓心在右上角，開始顏色為透明度為60%的白色，過渡到全白，結(jié)束顏色為完全透明的白色，文字段落行高設(shè)置為3倍字體大小。漸變的參數(shù)可不填寫，默認(rèn)從標(biāo)簽的開始到結(jié)束平均分配。圖2-4-23關(guān)于我們網(wǎng)頁文章內(nèi)容區(qū)的段落徑向漸變效果CSS代碼：123456789.contentp{ background:radial-gradient( 80%50%atrighttop, rgba(255,255,255,0.6), rgba(255,255,255,1)，rgba(255,255,255,0));line-height:3em;}課堂練習(xí)2-4-8制作關(guān)于我們網(wǎng)頁文章內(nèi)容區(qū)的一個(gè)四分之一圓角切角效果為練習(xí)2.4-6的關(guān)于我們文章內(nèi)容區(qū)制作切角效果，在內(nèi)容區(qū)左上角制作一個(gè)半徑為50px的四分之一圓角切角，如圖2-4-24所示：通過運(yùn)用透明色及圓形實(shí)現(xiàn)四分之一圓角切角效果。圖2-4-24關(guān)于我們網(wǎng)頁文章內(nèi)容區(qū)的一個(gè)四分之一圓角切角效果CSS代碼：12345678910111213141516.content{text-align:center; margin:10px20px; background:radial-gradient( circleattopleft,/*圓心位于左上角的圓形*/ transparent50px,/*透明色到50px的位置*/ rgba(252,220,0,0.9)0/*其他背景色填充為透明度90%的明黃色*/); padding:30px; box-sizing:border-box; /*怪異盒模型*/}知識(shí)與技能準(zhǔn)備10.3重復(fù)漸變：repeating-linear-gradient()、repeating-radial-gradient()漸變效果還有重復(fù)線性漸變r(jià)epeating-linear-gradient()和重復(fù)徑向漸變r(jià)epeating-radial-gradient()，效果如圖2-4-25所示：10、使用CSS3添加漸變效果圖2-4-25重復(fù)漸變效果課堂練習(xí)2-4-9制作關(guān)于我們網(wǎng)頁文章內(nèi)容區(qū)標(biāo)題與段落的分隔線效果為練習(xí)2.4-6的關(guān)于我們文章內(nèi)容區(qū)標(biāo)題與段落制作分隔線效果，制作一條顏色為：#9538ec、#009dff間隔的分隔線效果，如圖2-4-26所示：在標(biāo)題和段落之間添加一個(gè)標(biāo)簽，通過運(yùn)用透明色及#9538ec、#009dff的重復(fù)漸變實(shí)現(xiàn)分隔線效果。圖2-4-26關(guān)于我們網(wǎng)頁文章內(nèi)容區(qū)標(biāo)題與段落的分隔線效果HTML代碼：1234567<divclass="main">/*網(wǎng)頁主體標(biāo)簽*/<divclass="content"><h1>ABOUTUS</h1><divclass="line"></div><p><!--此處內(nèi)容省略--></p></div></div>CSS代碼：1234567891011.line{/*分隔線重復(fù)效果*/height:2px;/*標(biāo)簽高度*/background:repeating-linear-gradient(90deg,/*從左到右重復(fù)漸變*/#9538ec,#9538ec5px,/*從0到5px的顏色填充*/transparent5px,transparent10px,#009dff10px,#009dff15px,transparent15px,transparent20px);}任務(wù)實(shí)施為D清單網(wǎng)頁的home、apply、member、contact模塊設(shè)置對應(yīng)的背景樣式。home模塊使用的是淺灰色背景，apply模塊使用的是#1B75BC深藍(lán)色背景，把該模塊文字顏色設(shè)置成白色，member模塊使用的是圖片“bj.jpg”為背景，圖片相對于窗體固定，并鋪滿整個(gè)模塊，把該模塊文字顏色設(shè)置成白色。contact模塊設(shè)置深灰色背景，并把文字顏色改成白色。底部背景設(shè)置成黑色模塊，并把文字設(shè)置成白色。修改水平線<hr>的效果，水平線寬設(shè)置成模塊寬度的50%，使用漸變色作為背景，制作出中間深兩側(cè)淺的水平線效果。1、在home模塊添加淺灰色#CCC背景。123.home{background:#ccc;