《網(wǎng)頁設(shè)計與制作》2CSS篇22banner邊框的實現(xiàn)

CSS篇項目二“中國詩詞”網(wǎng)站首頁banner制作任務(wù)二banner邊框的實現(xiàn)邊框?qū)傩?CONTENTS目錄01邊框?qū)傩赃吙驅(qū)傩跃W(wǎng)頁中的邊框?qū)傩砸彩且粋€復(fù)合屬性，一個邊框樣式至少需要定義顏色、線型和粗細三個基本屬性才能顯示出邊框效果，對應(yīng)了三個子屬性：border-colorborder-color設(shè)置邊框顏色，border-color值可以是任意能表示顏色的值。如果希望區(qū)塊保留邊框的位置，卻又不顯示邊框，可以將border-color值設(shè)置為transparent，表示邊框是透明的。這個值用于創(chuàng)建有寬度的不可見邊框，在需要邊框顯示的時候可以通過JavaScript修改邊框顏色使其可見。border-styleborder-style設(shè)置邊框樣式，CSS定義了10中不同的邊框樣式：none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outsetborder-width border-width設(shè)置邊框粗細。border-width值可以是任意長度單位值，也可以用三個關(guān)鍵字：thin、medium和thick。但CSS3并沒有對這三個關(guān)鍵字指定具體寬度，所以不同瀏覽器顯示效果可能會有偏差。邊框?qū)傩钥梢杂脧?fù)合屬性border直接聲明邊框樣式，三個子屬性用空格隔開，語法如下：其中border-style不可省去，否則邊框無法顯示。其余兩個值都有默認值，如不設(shè)置，會顯示為默認值效果，邊框顏色默認值為“黑色”；邊框粗細默認值為“medium”。這樣聲明的區(qū)塊邊框四條邊框樣式相同，我們也可以給四條邊框設(shè)置不同的樣式，有兩種方法可以實現(xiàn)，一種方法可以使用單邊邊框樣式子屬性分別設(shè)置，4個單邊邊框樣式屬性是：border-top：上邊框border-bottom：下邊框border-left：左邊框border-right：右邊框每個子屬性聲明規(guī)則和border相同。另一種方法是用顏色、線性和粗細三個子屬性分別設(shè)置。多個位置設(shè)置的方式和項目一任務(wù)二中區(qū)塊邊距的設(shè)置相同，4個順序為上、右、下、左。border:border-colorborder-styleborder-width;邊框?qū)傩詧A角樣式在CSS3之前，想要實現(xiàn)區(qū)塊的圓角效果，只能通過圖片實現(xiàn)。CSS3中新增了border-radius屬性，讓實現(xiàn)圓角變得非常容易。語法規(guī)則如下：這里的length1表示圓角的水平偏移量，length2表示圓角的垂直偏移量，如圖3-2-11。偏移量可以用長度單位或者百分比來表示。一個區(qū)塊有四個角，因此我們在設(shè)置圓角的時候也就對應(yīng)了4個值，length1和length2都可以用1-4個值來定義，不同值個數(shù)代表的含義可以參考項目一任務(wù)二中margin屬性的定義，當(dāng)定義4個值時按圖中4個角標(biāo)示數(shù)字的順序。border-radius:length1/length2;邊框?qū)傩詧D片邊框border-image設(shè)置圖片邊框樣式。圖片邊框樣式是將原始圖片進行9宮格分割，如圖3-2-13，分割后四個角處的小圖按設(shè)置的邊框尺寸縮放后放置在區(qū)塊對應(yīng)角的位置，上、下、左、右的四張小圖按設(shè)置的顯示方式填充區(qū)塊上、下、左、右四條邊框（四個角除外），中間的小圖會重復(fù)填充區(qū)塊背景部分。border-image的語法是：border-image:url("URL")ABCD/border-widthtopbottomleftrighturl：圖片的相對路徑ABCD：圖片分割寬度，對應(yīng)圖3-2-12中的標(biāo)示。默認單位是px，這里只要設(shè)置數(shù)值，如果四個寬度相同，只要設(shè)置一個值即可。border-width：區(qū)塊邊框的寬度topbottom：上下兩條邊中圖像的顯示方法，repeat表示重復(fù)，stretch表示拉伸（默認），round表示平鋪leftright：左右兩條邊中圖像的顯示方法邊框?qū)傩詧D片邊框border-image設(shè)置圖片邊框樣式。圖片邊框樣式是將原始圖片進行9宮格分割，如圖3-2-13，分割后四個角處的小圖按設(shè)置的邊框尺寸縮放后放置在區(qū)塊對應(yīng)角的位置，上、下、左、右的四張小圖按設(shè)置的顯示方式填充區(qū)塊上、下、左、右四條邊框（四個角除外），中間的小圖會重復(fù)填充區(qū)塊背景部分。border-image的語法是：border-image:url("URL")ABCD/border-widthtopbottomleftrighturl：圖片的相對路徑ABCD：圖片分割寬度，對應(yīng)圖3-2-12中的標(biāo)示。默認單位是px，這里只要設(shè)置數(shù)值，如果四個寬度相同，只要設(shè)置一個值即可。border-width：區(qū)塊邊框的寬度topbottom：上下兩條邊中圖像的顯示方法，repeat表示重復(fù)，stretch表示拉伸（默認），round表示平鋪。repeat和round都是重復(fù)顯示小圖，但是round會自動調(diào)整小圖間距，使其完整的顯示在邊框范圍leftright：左右兩條邊中圖像的顯示方法邊框?qū)傩郧捎眠吙驑邮健饨钱?dāng)區(qū)塊的邊框有一定的寬度時，四個角就是這個寬度大小的四個小正方形。這四個小正方形對于相鄰的兩條邊框來說是共用的，如右上角的小正方形即是右邊框的一部分，也是上邊框的一部分。div{width:0px;height:0px; border:20pxsolidred;border-top-color:blue;border-bottom-color:blue;}邊框?qū)傩郧捎眠吙驑邮健獔A形CSS2時網(wǎng)頁中使用的區(qū)塊多數(shù)是矩形區(qū)塊，要使用圓形、三角形、平行四邊形等區(qū)塊形狀通常要通過外部圖片的輔助來實現(xiàn)。CSS3中新增了一些樣式屬性，可以幫助我們實現(xiàn)更靈活的區(qū)塊形狀。接下來我們就來看看圓形區(qū)塊的實現(xiàn)。border-radius屬性實現(xiàn)圓角矩形效果，從圖3-2-11可以看出，如果把length1和length2的值不斷增加，矩形的圓角弧度就會不斷變大，最終相鄰兩個角的鄰邊會交于一點。如果交于一點時length1和length2大小相同，此時這條邊框就變成了一條弧線，如果4條邊框都變成弧線，就形