Web前端開(kāi)發(fā)技術(shù)與實(shí)踐PPT課件

1、Web前端開(kāi)發(fā)技術(shù)與實(shí)踐第第1111章：背景與邊框章：背景與邊框阮曉/ http:/河南中醫(yī)學(xué)院管理信息工程學(xué)科河南中醫(yī)學(xué)院網(wǎng)絡(luò)信息中心2015.91 1河南中醫(yī)學(xué)院 / 阮曉龍 // http:/本章主要內(nèi)容p背景屬性p邊框?qū)傩詐案例：圖片輪轉(zhuǎn)的實(shí)現(xiàn)p案例：網(wǎng)頁(yè)課程表的實(shí)現(xiàn)2 2河南中醫(yī)學(xué)院 / 阮曉龍 // http:/1.背景屬性p背景的相關(guān)屬性是用于控制元素背景色、背景圖片等，同時(shí)可以設(shè)置背景圖片的排列方式。p背景的基本屬性主要用于定義背景的色彩、圖片、重復(fù)方式等基本內(nèi)容。3 31.1基本屬性河南中醫(yī)學(xué)院 /

2、 阮曉龍 // http:/1.背景屬性pbackground-colornbackground-color屬性用于設(shè)置元素的背景顏色。它的默認(rèn)值取值為none，允許下面的任何內(nèi)容顯示出來(lái)。nbackground-color屬性和color屬性一樣支持多種顏色格式。4 41.1基本屬性河南中醫(yī)學(xué)院 / 阮曉龍 // http:/1.背景屬性pbackground-imagenbackground-image屬性可以為元素指定背景圖像。n如果圖像包括透明區(qū)域，下面的內(nèi)容將會(huì)顯示出來(lái)。為防止這一點(diǎn)，網(wǎng)頁(yè)設(shè)計(jì)者通常將background-image

3、屬性和background-color屬性一起使用。背景顏色顯示在背景圖像下面，提供了不透明的背景。nbackground-image屬性需要一個(gè)URL來(lái)選擇作為背景的相應(yīng)圖像。n用作背景圖像的圖片類(lèi)型可以為瀏覽器支持的任何格式，通常為GIF、JPG和PNG格式。5 51.1基本屬性河南中醫(yī)學(xué)院 / 阮曉龍 // http:/1.背景屬性pbackground-repeatnbackground-repeat屬性決定當(dāng)背景圖像比元素的空間小時(shí)將如何排列。n該屬性的默認(rèn)值為repeat，這將讓圖像在水平和垂直兩個(gè)方向上平鋪。當(dāng)該屬性取值為repeat-x時(shí)，背景圖像將僅

4、在水平上平鋪。當(dāng)該屬性取值為repeat-y時(shí)，背景圖像將僅在垂直方向上平鋪。當(dāng)該屬性取值為no-repeat時(shí)，背景圖像將不會(huì)平鋪。6 61.1基本屬性河南中醫(yī)學(xué)院 / 阮曉龍 // http:/1.背景屬性pbackground-attachmentnbackground-attachment屬性決定背景圖像在元素的內(nèi)容進(jìn)行相應(yīng)滾動(dòng)時(shí)是應(yīng)該滾動(dòng)還是應(yīng)該停留在屏幕的一個(gè)固定位置。n這個(gè)屬性的默認(rèn)值取值為scroll。當(dāng)取值為fixed時(shí)，可實(shí)現(xiàn)水印效果，這和元素的專(zhuān)有屬性bgproperties（由Microsoft引入）相似。7 71.1基本屬性河南中醫(yī)學(xué)院 /

5、阮曉龍 // http:/1.背景屬性pbackground-positionnbackground-position屬性指定背景圖像，在元素的畫(huà)布空間中的定位方式。n有三種方法指定位置：p為圖像的左上角指定一個(gè)絕對(duì)距離，通常以像素為單位。p可以使用水平和垂直方向的百分比來(lái)指定位置。p可以使用關(guān)鍵字來(lái)描述水平和垂直方向的位置。水平方向上的關(guān)鍵字為left、center和right。垂直方向上的關(guān)鍵字為top、center和bottom。在使用關(guān)鍵字時(shí)，未指明的方向上默認(rèn)的取值為center。8 81.1基本屬性河南中醫(yī)學(xué)院 / 阮曉龍 //

6、http:/1.背景屬性9 91.1基本屬性河南中醫(yī)學(xué)院 / 阮曉龍 // http:/1.背景屬性10101.1基本屬性pbackground-positionn具體語(yǔ)法如下：注意：如果僅僅設(shè)置了一個(gè)關(guān)鍵字，那么第二個(gè)關(guān)鍵字將取默認(rèn)值center。因此，在上面的例子中，關(guān)鍵字center只需用一次即可。河南中醫(yī)學(xué)院 / 阮曉龍 // http:/1.背景屬性11111.1基本屬性pbackgroundnbackground屬性用于全面設(shè)置背景樣式。該屬性是一個(gè)復(fù)合屬性，可用于同時(shí)設(shè)置背景色、背景圖片、背景重復(fù)模式等。為更好地控制背景，一般不

7、建議通過(guò)該屬性來(lái)控制背景。n具體語(yǔ)法如下：河南中醫(yī)學(xué)院 / 阮曉龍 // http:/1.背景屬性12121.2 CSS3新增背景屬性pCSS3新增的背景屬性：河南中醫(yī)學(xué)院 / 阮曉龍 // http:/1.背景屬性13131.2 CSS3新增背景屬性pbackground-clipn在HTML頁(yè)面中，具有背景的元素通常有元素內(nèi)容、內(nèi)部補(bǔ)白（padding）、邊框、外部補(bǔ)白（margin）四部分組成。n元素背景的顯示范圍在CSS2與CSS2.1、CSS3中并不相同。p在CSS2中，背景的顯示范圍是指內(nèi)部補(bǔ)白之內(nèi)的范圍，不包括邊框。p在CSS2

8、.1和CSS3中，背景的顯示范圍是指包括邊框在內(nèi)的范圍。p在CSS3中，也可以使用background-clip來(lái)修飾背景的顯示范圍。n如果將background-clip的屬性值設(shè)定為border，則背景范圍包括邊框區(qū)域，如果設(shè)定為padding，則不包括邊框區(qū)域。河南中醫(yī)學(xué)院 / 阮曉龍 // http:/1414現(xiàn)場(chǎng)演示：n 案例11-01：兩種background-clip屬性值的對(duì)比河南中醫(yī)學(xué)院 / 阮曉龍 // http:/1.背景屬性15151.2 CSS3新增背景屬性pbackground-originn在繪制背景圖像時(shí)，默認(rèn)

9、是從內(nèi)部區(qū)域（padding）的左上角開(kāi)始，但是可以利用background-origin屬性來(lái)指定繪制時(shí)從邊框的左上角開(kāi)始，或者從內(nèi)容的左上角開(kāi)始。n在Firefox瀏覽器中指定繪制起點(diǎn)時(shí)，需要在樣式代碼中將background-origin屬性書(shū)寫(xiě)成“-moz-background-origin”的形式；在Safari瀏覽器或者Chrome瀏覽器中指定繪制起點(diǎn)時(shí)，需要在樣式代碼中將background-origin屬性寫(xiě)成“-webkit-background-origin”的形式。河南中醫(yī)學(xué)院 / 阮曉龍 // http:/1616現(xiàn)場(chǎng)演示：n 案例11-02：

10、background-origin屬性河南中醫(yī)學(xué)院 / 阮曉龍 // http:/1.背景屬性17171.2 CSS3新增背景屬性pbackground-sizen在CSS3中，可以使用background-size屬性來(lái)指定背景圖像的尺寸。使用background-size屬性來(lái)指定背景圖像尺寸的最簡(jiǎn)單的方法類(lèi)似如下所示：p其中，40px為背景圖像的寬度，20px為背景圖像的高度，中間用半角空格進(jìn)行分隔。n如果要維持圖像比例的話，可以設(shè)定圖像寬度與高度的同時(shí)，將另一個(gè)參數(shù)設(shè)定為“auto”。河南中醫(yī)學(xué)院 / 阮曉龍 // http:/181

11、8現(xiàn)場(chǎng)演示：n 案例11-03：background-size屬性河南中醫(yī)學(xué)院 / 阮曉龍 // http:/1.背景屬性19191.3多背景pCSS3多背景語(yǔ)法及參數(shù)nCSS3多背景語(yǔ)法和CSS中背景語(yǔ)法其實(shí)沒(méi)有本質(zhì)上的區(qū)別，只是在CSS3中可以給多個(gè)背景圖像設(shè)置相同或者不相同的background-（position|repeat|clip|size|origin|attachment）屬性。n在CSS3多背景中，相鄰背景之間必須使用逗號(hào)分隔開(kāi)。河南中醫(yī)學(xué)院 / 阮曉龍 // http:/1.背景屬性20201.3多背景pCSS3多背景語(yǔ)

12、法及參數(shù)n具體語(yǔ)法如下：n可以把上面的縮寫(xiě)拆解成以下形式：河南中醫(yī)學(xué)院 / 阮曉龍 // http:/2121現(xiàn)場(chǎng)演示：n 案例11-04：多背景屬性使用河南中醫(yī)學(xué)院 / 阮曉龍 // http:/1.背景屬性22221.3多背景pCSS3多背景的優(yōu)勢(shì)n使設(shè)計(jì)師部分?jǐn)[脫了對(duì)Adobe Photoshop等繪圖工具的依賴(lài)。n具有CSS 3多背景的層次之分。n可單獨(dú)指定背景圖像中某個(gè)圖像的平鋪方式、圖像的大小以及位置。n可圖片合成，代碼易于維護(hù)。河南中醫(yī)學(xué)院 / 阮曉龍 // http:/1.背景屬性23231.4漸變背

13、景p線性漸變n漸變是通過(guò)背景設(shè)置的，所以必須使用background或background-image屬性。具體語(yǔ)法如下：nlinear-gradient（）函數(shù)的屬性規(guī)定了創(chuàng)建漸變效果的開(kāi)始位置與顏色。第一個(gè)值可以是像素值、百分比或使用關(guān)鍵字top、bottom、left和right。n開(kāi)始位置可以用角度替換，指定漸變效果的方向。基本語(yǔ)法如下：n可以聲明各種顏色的結(jié)束位置。基本語(yǔ)法如下：河南中醫(yī)學(xué)院 / 阮曉龍 // http:/2424現(xiàn)場(chǎng)演示：n 案例11-05：線性漸變屬性河南中醫(yī)學(xué)院 / 阮曉龍 // http:/1.背景屬性252

14、51.4漸變背景p放射漸變n放射漸變的使用方法與前一方法相似。河南中醫(yī)學(xué)院 / 阮曉龍 // http:/2626現(xiàn)場(chǎng)演示：n 案例11-06：放射漸變屬性河南中醫(yī)學(xué)院 / 阮曉龍 // http:/2.邊框?qū)傩?7272.1基本屬性河南中醫(yī)學(xué)院 / 阮曉龍 // http:/2.邊框?qū)傩?8282.1基本屬性河南中醫(yī)學(xué)院 / 阮曉龍 // http:/2.邊框?qū)傩?9292.1基本屬性pborder-stylenborder-style屬性用來(lái)設(shè)置邊框的顯示外觀。它默認(rèn)的取值為none，即

15、沒(méi)有邊框。n具體語(yǔ)法：河南中醫(yī)學(xué)院 / 阮曉龍 // http:/2.邊框?qū)傩?0302.1基本屬性pborder-widthn可通過(guò)border-top-width、border-right-width、border-left-width、border-bottom-width分別設(shè)置邊框的寬度。也可通過(guò)border-width屬性對(duì)全部邊框進(jìn)行設(shè)置。nborder-width屬性可分別賦1-4個(gè)值，多個(gè)值按照順時(shí)針?lè)较驊?yīng)用到頂部、右邊、底部、左邊的邊框。邊框的寬度可以使用像素值和關(guān)鍵字來(lái)指定，關(guān)鍵字允許為thin，medium和thick。n具體語(yǔ)法如下：河南中醫(yī)

16、學(xué)院 / 阮曉龍 // http:/2.邊框?qū)傩?1312.1基本屬性pborder-colorn通過(guò)border-color屬性可以為邊框指定顏色。指定邊框顏色時(shí)可以使用支持的顏色英文名稱(chēng)、數(shù)字的RGB顏色規(guī)范、十六進(jìn)制色彩值。border-color屬性可以分別賦1-4個(gè)值，多個(gè)值按照順時(shí)針?lè)较驊?yīng)用到頂部、右邊、底部、左邊的邊框。也可以通過(guò)border-top-color、border-right-color、border-bottom-color、border-left-color為各邊框單獨(dú)設(shè)置顏色值。n具體語(yǔ)法如下：河南中醫(yī)學(xué)院 / 阮曉龍 / 139382

17、13680 / http:/2.邊框?qū)傩?2322.1基本屬性pborder屬性快速設(shè)置nborder屬性允許使用組合屬性值對(duì)邊框的寬度、顏色、風(fēng)格等進(jìn)行設(shè)置，也可通過(guò)border-top、border-right、border-bottom、border-left屬性使用組合屬性值對(duì)單一邊框的寬度、顏色、風(fēng)格等進(jìn)行設(shè)置。河南中醫(yī)學(xué)院 / 阮曉龍 // http:/3333現(xiàn)場(chǎng)演示：n 案例11-07：邊框基本屬性河南中醫(yī)學(xué)院 / 阮曉龍 // http:/2.邊框?qū)傩?4342.2 CSS3新增邊框?qū)傩詐CSS3新增的邊框?qū)傩跃哂袕?qiáng)大的生命

18、力，靈活使用這些屬性可以設(shè)計(jì)很多優(yōu)美精巧的UI界面效果。pCSS3增加了圓角邊框（border-radius）、圖片邊框（border-image）、漸變邊框、陰影（box-shadow）。河南中醫(yī)學(xué)院 / 阮曉龍 // http:/2.邊框?qū)傩?5352.3圓角邊框p在border-radius屬性中指定兩個(gè)半徑n具體語(yǔ)法如下：n針對(duì)這種情況，各種瀏覽器的處理方式并不一致。在Chrome瀏覽器和Safari瀏覽器中，會(huì)繪制出一個(gè)橢圓形邊框，第一個(gè)半徑為橢圓的水平方向半徑，第二個(gè)半徑為橢圓的垂直方向半徑。在Firefox瀏覽器與Opera瀏覽器中，將第一個(gè)半徑作為邊框

19、左上角與右下角的圓半徑來(lái)繪制，將第二個(gè)半徑作為邊框左下角與右上角的圓半徑來(lái)繪制。河南中醫(yī)學(xué)院 / 阮曉龍 // http:/3636現(xiàn)場(chǎng)演示：n 案例11-08：在border-radius屬性中指定兩個(gè)半徑河南中醫(yī)學(xué)院 / 阮曉龍 // http:/2.邊框?qū)傩?7372.3圓角邊框p不顯示邊框n如使用border-radius屬性但把邊框設(shè)定為不顯示時(shí)，瀏覽器將把背景的四個(gè)角繪制為圓角。河南中醫(yī)學(xué)院 / 阮曉龍 // http:/3838現(xiàn)場(chǎng)演示：n 案例11-09：不顯示邊框的使用河南中醫(yī)學(xué)院 / 阮曉龍 /

20/ http:/2.邊框?qū)傩?9392.3圓角邊框p修改邊框種類(lèi)n使用border-radius屬性后，不管邊框是什么種類(lèi)，都會(huì)將邊框沿著圓角曲線進(jìn)行繪制。河南中醫(yī)學(xué)院 / 阮曉龍 // http:/4040現(xiàn)場(chǎng)演示：n 案例11-10：修改邊框種類(lèi)河南中醫(yī)學(xué)院 / 阮曉龍 // http:/2.邊框?qū)傩?1412.3圓角邊框p繪制四個(gè)不同半徑的圓角邊框n可以通過(guò)分別定義border-top-left-radius、border-top-right-radius、border-bottom-right-radius、b

21、order-bottom-left-radius屬性值，分別定義邊框四個(gè)圓角半徑。河南中醫(yī)學(xué)院 / 阮曉龍 // http:/4242現(xiàn)場(chǎng)演示：n 案例11-11：繪制四個(gè)不同半徑的圓角邊框河南中醫(yī)學(xué)院 / 阮曉龍 // http:/2.邊框?qū)傩?3432.4圖片邊框pborder-imagenborder-image具體語(yǔ)法:n參數(shù)的含義與使用方法:pnone：默認(rèn)值，表示邊框無(wú)背景圖片。p：設(shè)置背景圖片，這跟background-image一樣，可以使用絕對(duì)或相對(duì)的URL地址，來(lái)指定邊框的背景圖片。p：number是一個(gè)數(shù)值，用來(lái)設(shè)置邊框

22、或者邊框背景圖片的大小，其單位是像素（px），可以使用1-4個(gè)值，表示4個(gè)方位的值。河南中醫(yī)學(xué)院 / 阮曉龍 // http:/2.邊框?qū)傩?4442.4圖片邊框pborder-imagen參數(shù)的含義與使用方法:p：percentage也是用來(lái)設(shè)置邊框或者邊框背景圖片的大小，和number不同之處是，percentage使用的是百分比。pstretch、repeat、round：這三個(gè)屬性參數(shù)是用來(lái)設(shè)置邊框背景圖片的鋪放方式，類(lèi)似于background-position。其中stretch會(huì)拉伸邊框背景圖片；repeat會(huì)重復(fù)邊框背景圖片；round會(huì)平鋪邊框背景圖片

23、，其中stretch為默認(rèn)值。河南中醫(yī)學(xué)院 / 阮曉龍 // http:/2.邊框?qū)傩?5452.4圖片邊框pborder-imagen為了便于理解，暫把border-image在語(yǔ)法的表達(dá)式形式進(jìn)行屬性的分解闡述（實(shí)際應(yīng)用中是不能分解的），分解后變成以下四個(gè)部分：p引入背景圖片：border-image-source。p切割引入背景圖片：border-image-slice。p邊框圖片的寬度：border-image-width。p邊框背景圖片的排列方式：border-image-repeat。河南中醫(yī)學(xué)院 / 阮曉龍 // http:/2

24、.邊框?qū)傩?6462.4圖片邊框pborder-image-sourcenborder-image-source具體語(yǔ)法:nborder-image-source和CSS 2中的background-image屬性相似，也是通過(guò)url（）來(lái)調(diào)用背景圖片，圖片的路徑可以是相對(duì)地址，也可以是絕對(duì)地址，其默認(rèn)值為none。河南中醫(yī)學(xué)院 / 阮曉龍 // http:/2.邊框?qū)傩?7472.4圖片邊框pborder-image-slicenborder-image-slice具體語(yǔ)法:nborder-image-slice是用來(lái)分解引入的背景圖片，這個(gè)參數(shù)相對(duì)來(lái)說(shuō)比較復(fù)雜，主

25、要有以下幾個(gè)方面:p取值支持 | 。其中number是沒(méi)有單位的，因?yàn)槠淠J(rèn)值的單位就是像素。除了直接用number來(lái)設(shè)置外，還可以使用百分比值來(lái)表示，即相對(duì)于邊框背景圖片而言的。河南中醫(yī)學(xué)院 / 阮曉龍 // http:/2.邊框?qū)傩?8482.4圖片邊框pborder-image-slicenborder-image-slice是用來(lái)分解引入的背景圖片，這個(gè)參數(shù)相對(duì)來(lái)說(shuō)比較復(fù)雜，主要有以下幾個(gè)方面:p例如，邊框圖片的大小是300px*240px，取百分比為25%，30%，15%，20%，實(shí)際相對(duì)應(yīng)的效果就是剪切了圖片的60px，90px，36px，60px的四邊大

26、小。pborder-image-slice中的number或者percentage都可以取1-4個(gè)值，這個(gè)類(lèi)似于CSS 2中的border-width的取值方式，遵循top、right、bottom、left的規(guī)則。pfill從字面上說(shuō)就是填充的意思，如果使用這個(gè)關(guān)鍵字時(shí)，圖片邊界的中間部分將保留下來(lái)，默認(rèn)情況下為空。河南中醫(yī)學(xué)院 / 阮曉龍 // http:/2.邊框?qū)傩?9492.4圖片邊框pborder-image-slicenborder-image-slice是用來(lái)分解引入的背景圖片，這個(gè)參數(shù)相對(duì)來(lái)說(shuō)比較復(fù)雜，主要有以下幾個(gè)方面:p剪切的特性（slice）。

27、在border-image中slice是一個(gè)關(guān)鍵部分，border-image-slice雖然表面上說(shuō)不是剪切，但實(shí)際應(yīng)用中就是一種純粹的剪切，把取到的邊框圖片切成九份，再像background-image一樣重新布置（如圖1所示），在該圖中，border-image-slice屬性在距邊框背景圖片的top、right、bottom、left四邊的18px分別切了一刀，這樣一來(lái)就把背景圖片切成了九個(gè)部分，稱(chēng)為“九宮格”（如圖2所示），分割后的圖像在CSS 3中的名稱(chēng)如表11-06 所示。河南中醫(yī)學(xué)院 / 阮曉龍 // http:/5050圖1 瀏覽器對(duì)于圖像文件的分割

28、圖2 A、B、C、D、四個(gè)參數(shù)河南中醫(yī)學(xué)院 / 阮曉龍 // http:/5151河南中醫(yī)學(xué)院 / 阮曉龍 // http:/2.邊框?qū)傩?2522.4圖片邊框pborder-image-slicenborder-top-right-image、border-bottom-right-image、border-bottom-left-image 以及border-top-left-image四個(gè)邊角部分，在border-image中是沒(méi)有任何展示效果的，把這四個(gè)部分稱(chēng)為盲區(qū)。nborder-top-image、border-right-ima

29、ge、border-bottom-image以及border-left-image屬于展示效果區(qū)域。其中上下區(qū)域border-top-image和border-bottom-image區(qū)域受到水平方向效果影響，border-right-image和border-left-image區(qū)域受到垂直方向效果影響。河南中醫(yī)學(xué)院 / 阮曉龍 // http:/5353現(xiàn)場(chǎng)演示：n 案例11-12：水平round效果n 案例11-13：水平repeat效果n 案例11-14：水平stretch效果n 案例11-15：垂直round效果n 案例11-16：垂直repeat效果河南中

30、醫(yī)學(xué)院 / 阮曉龍 // http:/2.邊框?qū)傩?4542.4圖片邊框p通過(guò)上面幾個(gè)案例比較可知：nrepeat屬性是邊框中間向兩端不斷平鋪，在平鋪的過(guò)程中保持邊框背景圖片切片的大小，這樣就造成了圖示中的兩端邊緣處有被切的現(xiàn)象；nround屬性則會(huì)對(duì)邊框背景圖的切片進(jìn)行壓縮（拉伸）來(lái)適應(yīng)邊框?qū)挾却笮∵M(jìn)行排列，使其正好顯示在區(qū)域內(nèi)；nstretch屬性只會(huì)把相應(yīng)的切片進(jìn)行拉伸，適應(yīng)邊框的大小。河南中醫(yī)學(xué)院 / 阮曉龍 // http:/2.邊框?qū)傩?5552.4圖片邊框pborder-image-widthnborder-image-widt

31、h具體語(yǔ)法：n該屬性用來(lái)設(shè)置邊框背景圖片的顯示大小，其實(shí)也可以理解為border-width，雖然W3C定義了border-image-width屬性，但各瀏覽器還是將其視為border-width來(lái)用，也就是border-image-width屬性用法和border-width屬性用法一樣。河南中醫(yī)學(xué)院 / 阮曉龍 // http:/2.邊框?qū)傩?6562.4圖片邊框pborder-image-repeatnborder-image-repeat具體語(yǔ)法：n該屬性用來(lái)指定邊框背景圖片的排列方式，默認(rèn)值為stretch。這個(gè)屬性設(shè)置參數(shù)和其他屬性不同，border-i

32、mage-repeat不遵循top、right、bottom、left的方位原則，只接受兩個(gè)（或一個(gè)）參數(shù)值，第一個(gè)值表示水平方向上的排列方式，第二個(gè)值表示垂直方向上的排列方式。當(dāng)取一個(gè)值時(shí)，表示水平和垂直方向上的排列方式相同。如果不設(shè)置任何值時(shí)，水平和垂直方向上都會(huì)以默認(rèn)值stretch方式進(jìn)行排列，如圖3所示。河南中醫(yī)學(xué)院 / 阮曉龍 // http:/5757圖3 背景圖片平鋪方式河南中醫(yī)學(xué)院 / 阮曉龍 // http:/2.邊框?qū)傩?8582.5漸變邊框pCSS3提供了4個(gè)屬性來(lái)支持漸變邊框，但這4個(gè)屬性目前只有Firefox瀏覽器

33、能夠支持：nborder-top-colors：該屬性用于設(shè)置目標(biāo)組件上邊框顏色。如果設(shè)置上邊框的寬度是Npx，那么就可以為該屬性設(shè)置N種顏色，每種顏色顯示1px的寬度。但如果設(shè)置的顏色數(shù)量小于邊框的寬度，那么最后一個(gè)顏色將會(huì)覆蓋該邊框剩下的寬度。nborder-right-colors：該屬性用于設(shè)置目標(biāo)組件的右邊框顏色。該屬性指定多個(gè)顏色值的意義與border-top-colors屬性里各顏色值的意義相同。河南中醫(yī)學(xué)院 / 阮曉龍 // http:/2.邊框?qū)傩?9592.5漸變邊框pCSS3提供了4個(gè)屬性來(lái)支持漸變邊框，但這4個(gè)屬性目前只有Firefox瀏覽器能

34、夠支持：nborder-bottom-colors：該屬性用于設(shè)置目標(biāo)組件的下邊框顏色。該屬性指定多個(gè)顏色值的意義與border-top-colors屬性里各個(gè)顏色值的意義相同。nborder-left-colors：該屬性用于設(shè)置目標(biāo)組件的左邊框顏色。該屬性指定多個(gè)顏色值的意義與border-top-colors屬性里各個(gè)顏色值的意義相同。河南中醫(yī)學(xué)院 / 阮曉龍 // http:/6060現(xiàn)場(chǎng)演示：n 案例11-17：漸變邊框河南中醫(yī)學(xué)院 / 阮曉龍 // http:/2.邊框?qū)傩?1612.6盒子陰影p語(yǔ)法nbox-shadow具體語(yǔ)法

35、：nbox-shadow屬性可以使用一個(gè)或多個(gè)投影，如果使用多個(gè)投影時(shí)必須使用逗號(hào)“,”隔開(kāi)。nbox-shadow參數(shù)的具體內(nèi)容：pnone：默認(rèn)值，元素沒(méi)有任何陰影效果。pinset：陰影類(lèi)型，可選值。如果不設(shè)置，其默認(rèn)的投影方式是外陰影；如果取其唯一值“inset”，就是給元素設(shè)置內(nèi)陰影。河南中醫(yī)學(xué)院 / 阮曉龍 // http:/2.邊框?qū)傩?2622.6盒子陰影p語(yǔ)法nbox-shadow參數(shù)的具體內(nèi)容：px-offset：陰影水平偏移量，其值可以是正負(fù)值。其值取正值，則陰影在元素右邊；取負(fù)值，則陰影在元素的左邊。py-offset：陰影垂直偏移量，其值可以

36、是正負(fù)值。其值取正值，則陰影在元素底部；取負(fù)值，陰影在元素的頂部。pblur-radius：陰影模糊半徑，可選參數(shù)。其值只能是正值，如果取值為“0”時(shí)，表示陰影不具有模糊效果，取值越大，陰影的邊緣就越模糊。河南中醫(yī)學(xué)院 / 阮曉龍 // http:/2.邊框?qū)傩?3632.6盒子陰影p語(yǔ)法nbox-shadow參數(shù)的具體內(nèi)容：pspread-radius：陰影擴(kuò)展半徑，可選參數(shù)。其值可以是正負(fù)值，取值為正值，則整個(gè)陰影都延展擴(kuò)大；取負(fù)值，則整個(gè)陰影都縮小。pcolor：陰影顏色，可選參數(shù)。如果不設(shè)定任何顏色時(shí)，瀏覽器會(huì)取默認(rèn)色，但各瀏覽器默認(rèn)色不一樣，特別是在webk

37、it內(nèi)核下的瀏覽器將無(wú)色，也就是透明。河南中醫(yī)學(xué)院 / 阮曉龍 // http:/2.邊框?qū)傩?4642.6盒子陰影p應(yīng)用n和Adobe Photoshop軟件制作圖片相比，box-shadow修改元素陰影效果要方便得多，因?yàn)閎ox-shadow可以修改六個(gè)參數(shù)，從而得到不同的效果。n單邊陰影效果p從下面案例中分析單邊陰影效果。河南中醫(yī)學(xué)院 / 阮曉龍 // http:/6565現(xiàn)場(chǎng)演示：n 案例11-18：?jiǎn)芜呹幱靶Ч幽现嗅t(yī)學(xué)院 / 阮曉龍 // http:/2.邊框?qū)傩?6662.6盒子陰影p應(yīng)用n四邊相同陰影

38、效果pbox-shadow給元素設(shè)置相同的四邊陰影效果，其實(shí)分為兩種： 只設(shè)置陰影模糊半徑和陰影顏色 只設(shè)置擴(kuò)展半徑和陰影顏色p從案例中進(jìn)行分析只設(shè)置陰影模糊半徑和陰影顏色與只設(shè)置擴(kuò)展半徑和陰影顏色的效果。河南中醫(yī)學(xué)院 / 阮曉龍 // http:/6767現(xiàn)場(chǎng)演示：n 案例11-19：設(shè)置相同四邊陰影效果（只設(shè)置陰影模糊半徑和陰影顏色）n 案例11-20：設(shè)置相同四邊陰影效果（只設(shè)置擴(kuò)展半徑和陰影顏色）河南中醫(yī)學(xué)院 / 阮曉龍 // http:/6868現(xiàn)場(chǎng)演示：n 案例11-21：內(nèi)陰影效果河南中醫(yī)學(xué)院 / 阮曉龍 // http:/2.邊框?qū)傩?9692.6盒子陰影p應(yīng)用n圖片內(nèi)陰影效果pbox-shadow的inset內(nèi)陰影直接運(yùn)用在圖片“img”元素上是沒(méi)有任何效果的。只有在img外添加一個(gè)容器便簽，例如“div”便簽，不將img轉(zhuǎn)換成div便簽的背景，只是將box-shadow的內(nèi)陰影使用在div標(biāo)簽上，img才會(huì)出