《HTML5網(wǎng)頁前端設計》教案第11章CSS3技術一、教學目標：掌握CSS3邊框和背景效果的應用；掌握CSS3文本和字體效果的應用；掌握CSS3變形與動畫效果的應用；掌握CSS3多列效果的應用。二、教學重點和難點：重點：掌握CSS3各類樣式（邊框、背景、文本、字體）效果的應用；難點：掌握CSS3變形與動畫效果的應用。三、教學方法與手段：采取互動式教學方法，理論教學使用多媒體投影教室。四、課程簡介：本章主要介紹CSS3技術的新增內容，是在第三章CSS基礎知識上的補充。元素的樣式效果新增內容主要包括CSS3邊框、背景、文本、字體等。CSS3變形技術分為2D與3D兩種，本書主要介紹了2D效果下的元素變形的應用。在CSS3動畫部分介紹了Transition簡單動畫與Animation組合動畫。最后介紹了CSS3多列技術，該技術可用于分欄布局頁面內容，實現(xiàn)仿報紙排版效果。五、教學基本內容：11.1CSS3邊框和背景效果 11.1.1CSS3邊框 CSS3新增了三種邊框效果，分別是為元素設置圓角邊框、帶陰影效果的邊框和圖片邊框。具體屬性名稱如表11-1所示。表11-SEQ表11-\*ARABIC1CSS3新增邊框效果屬性一覽屬性名稱解釋border-radius為元素設置圓角邊框。box-shadow為元素設置帶陰影效果的邊框。border-image為元素設置帶有背景圖片的邊框。CSS3圓角邊框在CSS3中，border-radius屬性可用于直接創(chuàng)建帶有圓角的邊框樣式，該屬性值表示圓角邊框的圓角半徑長度，數(shù)值越大則圓的弧度越明顯。其語法格式如下：border-radius:<length>|<percentage>;border-radius屬性的取值有以下兩種形式：<length>：使用長度值規(guī)定圓角半徑的長度，該值不可為負數(shù)。<percentage>：使用百分比規(guī)定圓角半徑的長度，該值不可為負數(shù)。border-radius實際上是一種簡寫形式，用于一次性定義邊框的四個角。如需為不同的角分別定義樣式，可以查看表11-3。表11-SEQ表11-\*ARABIC3CSS3圓角邊框屬性值一覽表屬性值解釋border-radius用于定義邊框四個角的弧度border-top-left-radius用于定義邊框左上角的弧度border-top-right-radius用于定義邊框右上角的弧度border-bottom-left-radius用于定義邊框左下角的弧度border-bottom-right-radius用于定義邊框右下角的弧度以上4種border-*-radius屬性均與border-radius屬性取值方式相同，可以使用長度值或百分比的形式表示。CSS3矩形陰影在CSS3中，box-shadow屬性可以為邊框添加陰影，該屬性適用于所有元素。box-shadow的默認屬性值為none，表示無陰影效果。其語法格式如下：box-shadow:xoffsetyoffsetwidthcolor參數(shù)解釋如下：xoffset：表示陰影在水平方向（x軸）上的偏移距離，取值為CSS長度值<length>。yoffset：表示陰影在垂直方向（y軸）上的偏移距離，取值為CSS長度值<length>。width：表示陰影的寬度，取值為CSS長度值<length>。color：表示陰影的顏色效果，取值為CSS顏色值<color>。例如，為矩形添加一個15px寬的灰色陰影，映射在右下角。div{

box-shadow:10px10px15pxgray}CSS3圖像邊框在CSS3中，border-image屬性可以元素添加自定義圖像效果的邊框，該屬性適用于所有元素。CSS圖像邊框相關屬性如表11-6所示。表11-SEQ表11-\*ARABIC6CSS3圖片邊框屬性一覽表屬性名稱解釋border-image-source用于設置或獲取元素邊框的圖像來源路徑。其默認值為none，表示無背景圖片。border-image-slice用于設置或獲取邊框圖片的分割方式。border-image-width用于設置或獲取邊框厚度。border-image-outset用于設置或獲取邊框背景圖超出邊框的量。border-image-repeat用于設置或獲取邊框圖片的平鋪狀態(tài)。其默認值為stretch。border-image復合屬性，用于定義邊框圖片的全部設置。border-image-slice屬性有三種取值，解釋如下：<number>：使用數(shù)值規(guī)定寬度，允許是整數(shù)或浮點數(shù)，不可以是負數(shù)。<percentage>：使用百分比規(guī)定寬度，不可以是負值。fill：保留剪裁后的區(qū)域，這塊區(qū)域的平鋪方式依據(jù)border-image-repeat的規(guī)定。注：border-image-slice屬性的默認值為100%。border-image-repeat屬性有三種取值，解釋如下：repeat：定義用重復平鋪的方式填充邊框背景圖。如果圖片碰到邊框的邊界超過部分將被截斷。round：定義用重復平鋪的方式填充邊框背景圖。圖片會根據(jù)邊框尺寸動態(tài)調整圖片大小，直至正好可以鋪滿整個邊框。stretch：定義用拉伸圖片的方式填充邊框背景圖。該屬性值為默認值。注：事實上border-image-repeat屬性在標準中還有一個取值為space，由于目前所有的主流瀏覽器均不支持該屬性，因此沒有列入表中。border-image是一種簡寫形式，用于一次性定義若干種border-image-*屬性。其聲明常用順序如下（省略border-image-前綴）：[source][slice][width][outset][repeat]border-image屬性的默認值為none100%10stretch，如果其中部分屬性省略不寫，則取其對應的默認值。如果同時設置了border-style與border-image屬性，瀏覽器會優(yōu)先顯示border-image規(guī)定的樣式效果。當border-image屬性值為none或者指定的圖像不可見時將會顯示border-style所定義的邊框樣式。例如，為段落元素p同時設置普通邊框樣式與圖片邊框樣式：p{border:2pxsolidred;border-image:url(image/test.jpg)10;}上述代碼同時定義了border屬性與border-image屬性，如果border-image中指定的圖片不可見或尚未被加載，則以border屬性規(guī)定的樣式顯示；如果圖片加載成功，則只顯示border-image規(guī)定的邊框樣式。11.1.2CSS3背景效果 CSS3新增了三種背景效果，可用于自定義背景圖片或顏色的繪制區(qū)域、位置和尺寸。具體屬性名稱如表11-7所示。表11-SEQ表11-\*ARABIC7CSS3新增背景效果屬性一覽屬性名稱解釋background-clip自定義背景圖片的繪制區(qū)域。background-origin自定義背景圖片的位置。background-size自定義背景圖片的尺寸。自定義背景圖片繪制區(qū)域在CSS3中，background-clip屬性可用于剪裁元素的背景圖片或顏色區(qū)域，使其只顯示指定的區(qū)域內容。其語法格式如下：background-clip:border-box|padding-box|content-box|text;background-clip屬性的取值有以下4種形式：padding-box：只保留元素內邊距之內的背景區(qū)域，包括內邊距本身。border-box：只保留元素邊框之內的背景區(qū)域，包括邊框本身。content-box：只保留元素內容區(qū)域的背景。該屬性值是默認值。text：只保留前景內容（例如文字）的形狀，其他區(qū)域的背景圖像均去掉。該取值必須將屬性名稱寫成-webkit-background-clip方可使用。自定義背景圖片位置在CSS3中，background-origin屬性可用于剪裁元素的背景圖片，使其只顯示指定的區(qū)域內容。該屬性必須與background-image屬性配合使用，否則沒有圖片來源則無法對背景圖片進行定位。其語法格式如下：background-origin:border-box|padding-box|content-box;background-origin屬性的<position>參數(shù)表示背景圖片的位置，有以下3種取值：padding-box：從元素內邊距開始顯示背景圖像，該屬性值是默認值。border-box：從元素邊框開始顯示背景圖像。content-box：從元素內容區(qū)域開始顯示背景圖像。自定義背景圖片尺寸在CSS3中，background-size屬性可用于定義元素背景圖片的尺寸大小。其語法格式如下：background-size:<bg-size>[,<bg-size>];background-size的<bg-size>參數(shù)表示背景圖片的位置，有以下5種取值：<length>：使用長度值規(guī)定背景圖像的大小，該值不可為負數(shù)。<percentage>：使用百分比規(guī)定背景圖像的大小，該值不可為負數(shù)。auto：背景圖像的真實大小。cover：將背景圖像等比例縮放到完全覆蓋容器。由于圖像有可能與容器比例不一致導致部分背景圖像超出容器范圍。contain：將背景圖像等比例縮放到寬度或高度與容器保持一致。背景圖像始終在容器中，不會超出容器的范圍。該屬性允許包含1-2個參數(shù)，如果只有單個參數(shù)則用于表示寬度的樣式，高度默認為跟隨寬度等比例縮放。例如：p{background-size:200px;}上述代碼表示將段落元素<p>的背景圖片寬度縮放為200像素，高度會隨著寬度等比例縮放。如果有2個參數(shù)則第一個參數(shù)表示寬度，第二個參數(shù)表示高度。例如：p{background-size:200px300px;}上述代碼表示將段落元素<p>的背景圖片寬度縮放為200像素、高度縮放為300像素。11.2CSS3文本和字體效果 11.2.1CSS3文本 CSS3新增了兩種文本效果，分別是為文本添加陰影效果和長單詞強制換行效果。具體屬性名稱如表11-11所示。表11-SEQ表11-\*ARABIC11CSS3新增文本效果屬性一覽屬性名稱解釋text-shadow用于為指定的文本添加陰影效果。word-wrap用于實現(xiàn)長單詞強制換行效果。CSS3文本陰影CSS3使用text-shadow屬性為指定文本添加陰影效果。其基本格式如下：text-shadow:xoffsetyoffsetwidthcolor參數(shù)解釋如下：xoffset：指的是陰影距離原文字內容在橫向上的偏移距離。取值為CSS長度值<length>，可以為負值。yoffset：指的是陰影距離原文字內容在縱向上的偏移距離。取值為CSS長度值<length>，可以為負值。width：表示陰影的模糊半徑，半徑越大陰影面積越大，顯示效果越模糊，該值如果缺省則陰影和正文的面積大小完全一樣。取值為CSS長度值<length>，不能為負值。color：表示陰影的顏色效果，取值為CSS顏色值<color>。該值如果缺省在Chrome瀏覽器中不會顯示陰影，而在Firefox和Opera瀏覽器中將直接使用字體顏色作為陰影顏色。注：text-shadow的默認屬性值為none，表示無陰影效果。例如：h3{text-shadow:5px5pxred}指的是在目標文本內容右邊5px和下面5px的地方渲染紅色陰影。CSS3文字換行CSS3使用word-wrap屬性規(guī)定文本的換行規(guī)則，可以將長單詞斷開換到下一行繼續(xù)顯示。其語法格式如下：word-wrap:normal|break-word;word-wrap屬性的取值有以下兩種形式：normal：指的是只允許在斷字點換行，如果單詞較長則直接溢出邊界不會自動換行。該屬性值為默認值。break-word：指的是文本內容允許在邊界內換行，如果單詞較長將在內部斷開換行。注：word-wrap的默認屬性值為none，表示無陰影效果。例如：p{word-wrap:break-word;}上述代碼表示段落元素<p>中的文字內容強制在元素邊界處換行。11.2.2CSS3字體 在CSS3之前，瀏覽器只能顯示設備上已安裝的字體。目前在CSS3中，通過@font-face的規(guī)則，網(wǎng)頁可以顯示任何字體。當有特殊字體時，可以將其放在服務器端，在瀏覽頁面時會被自動下載到用戶的設備終端。其語法規(guī)則如下：@font-face{font-family:<identifier>;src:<url>[format(<string>)]}例如：@font-face{font-family:'diyfont';src:url('diyfont.ttf')format('truetype')}其中font-family的名稱可以自定義，然后在CSS樣式聲明font屬性時使用該名稱即可。p{font-family:'diyfont';}目前各類瀏覽器中的常用字體格式有如下四種：TrueType(.ttf)：中文稱為“全真”字體，該字體由微軟與蘋果公司聯(lián)合提出，使用數(shù)學函數(shù)定義字體輪廓，因此也被稱為輪廓字體。；WebOpenFontFormat(.woff)：中文稱為“開放字體格式”，該字體不包含加密內容，目前由W3C組織的Web字體工作組進行標準化；EmbeddedOpenType(.eot)：這是一種壓縮字庫，可以解決網(wǎng)頁中加載特殊字體的問題。該字體目前只有IE瀏覽器（微軟已于2023年2月14日正式禁用）可以支持；SVG(.svg)：SVG的全稱是ScalableVectorGraphics（可縮放矢量圖），它使用二維矢量圖來顯示字體，也是由W3C制定的一種開放標準。注意：如果需要兼容目前所有的主流瀏覽器，需要同時使用TureType(.ttf)、WebOpenFontFormat(.woff)、EmbeddedOpenType(.eot)和SVG(.svg)四種格式字體。 11.3CSS3變形與動畫效果 11.3.1CSS32D變形CSS3中的transform屬性用于元素變形，它能夠實現(xiàn)對元素進行移動、收縮、旋轉等2D動畫效果。transform屬性有如下5種方法，具體可以查看表11-17。表11-SEQ表11-\*ARABIC17transform屬性方法一覽表方法名稱解釋 translate(x,y)元素移動到指定位置。例如translate(10px,20px)表示元素從左側往右移動10像素，從頂部往下移動20像素。rotate(degree)元素順時針旋轉指定的角度，填入負數(shù)則逆時針旋轉。例如rotate(30deg)表示順時針旋轉30度。scale(x,y)元素尺寸縮放指定的倍數(shù)。例如scale(2,3)表示寬度放大為原始尺寸的2倍，高度放大為原先的3倍。skew(xdeg,ydeg)圍繞x軸和y軸將元素翻轉指定的角度。例如skew(20deg,10deg)指的是將元素橫向傾斜20度，縱向傾斜10度。matrix(m11,m12,m21,m22,dx,dy)該方法包含了矩陣變換數(shù)學函數(shù)，根據(jù)填入的數(shù)據(jù)不同可以做到元素的移動、旋轉、縮放和傾斜?？梢杂迷摲椒ㄍ瓿筛鼮閺碗s的變形。 11.3.2CSS3Transition動畫 CSS3中的Transition動畫又稱為過渡動畫，在指定時間內可以將元素從原始樣式逐漸變化為新的樣式。通?？捎糜谑髽藨彝Ｔ谠厣习l(fā)生動畫事件。transition動畫包含5種屬性，具體可以查看表11-19。表11-SEQ表11-\*ARABIC19transition動畫屬性一覽表屬性名稱解釋transition-property用于指定對何種CSS屬性進行漸變處理。例如可以指定元素的背景顏色background-color、寬度width、高度height等。transition-duration用于指定transition動畫的持續(xù)時間，例如5秒寫為5s。transition-timing-function用于指定transition動畫的漸變速度。缺省值為ease。transition-delay用于指定transition動畫的延遲時間，缺省值為0s。transition復合屬性，用于一次性設置4種屬性效果。11.3.3CSS3Animation動畫 CSS3可以創(chuàng)建Animation動畫效果。該動畫可以自定義任意多個關鍵時間點的樣式效果，瀏覽器將自動處理兩個關鍵時間節(jié)點之間的漸變效果，所有的關鍵幀組合在一起形成更復雜的動畫效果。在網(wǎng)頁文檔中使用可取代Flash動畫、動態(tài)圖片和JavaScript。與animation動畫相關有10種屬性，具體可以查看表11-21。表11-SEQ表11-\*ARABIC21主animation動畫相關屬性一覽表屬性名稱解釋@keyframes用于設置自定義動畫內容。animation-name用于檢查或設置需要執(zhí)行的@keyframes動畫的名稱。animation-duration用于檢查或設置動畫完成的時間。默認值為0。animation-timing-function用于檢查或設置動畫的速度曲線，默認值是ease。animation-delay用于檢查或設置動畫延遲開始的時間。默認值是0。animation-iteration-count用于檢查或設置動畫的播放次數(shù)。默認值為1。animation-direction用于檢查或設置動畫在循環(huán)播放時的運動方向。animation-play-state用于檢查或設置動畫是否在運行或暫停狀態(tài)。默認值為running。animation-fill-mode用于檢查或設置動畫時間以外的狀態(tài)。animation復合屬性，用于一次性設置所有動畫效果。11.4CSS3多列 CSS3可以將文本布局分割為多個列，實現(xiàn)仿報紙排版效果。11.4.1columns CSS3中columns是一個復合屬性，用于同時設置目標文本每列的寬度和列數(shù)。其語法結構如下：columns：<column-width><column-count>columns包含的兩個參數(shù)解釋如下：column-width：用于設置每列的寬度。可填入長度值用于指定每列的寬度。缺省值為auto，表示根據(jù)column-count屬性自動分配寬度。column-count：用于設置文本分割的列數(shù)，可填入正整數(shù)用于指定列數(shù)。缺省值為auto，表示根據(jù)column-width屬性自動分配寬度。這兩個參數(shù)也可以作為獨立的屬性使用，columns相當于同時指定column-width和column-count的屬性。例如，為段落元素<p>實現(xiàn)多列效果：p{columns:20px3;}上述代碼表示將文本分為3列，每列寬度為20像素。如果需要兼容低版本的主流瀏覽器，可以把幾種寫法都加入CSS樣式：p{columns:20px3;/*兼容舊版Firefox*/-moz-columns:20px3;/*兼容舊版Safari、Chrome和Opera*/-webkit-columns:20px3;}11.4.2column-gap CSS3中column-gap屬性用于設置列與列之間的寬度。其語法結構如下：column-gap:<length>其中<length>可填入一個長度值來規(guī)范列與列之間的距離。缺省值為normal，表示根據(jù)font-size的值自動分配同樣長度值的距離。例如，為段落元素<p>設置列間距：p{column-gap:30px;}上述代碼表示文本列與列間隔30像素的距離。如果需要兼容低版本的主流瀏覽器，可以把幾種寫法都加入CSS樣式：p{column-gap:30px;/*兼容舊版Firefox*/-moz-column-gap:30px;/*兼容舊版Safari、Chrome和Opera*/-webkit-column-gap:30px;}11.4.3column-rule CSS3中column-rule屬性適用于同時為列與列之間的分割線設置寬度、樣式和顏色規(guī)范。其語法結構如下：column-rule：<column-rule-width><column-rule-style><column-rule-color>column-rule是一個復合屬性，包括三個屬性分別對應設置分割線的寬度、樣式和顏色，具體解釋如下：column-rule-width：用于設置列與列之間的分割線的寬度，可填入CSS長度值<length>，例如20px。column-rule-style：用于設置分割線的線形，例如實線solid、虛線dashed等。缺省值為none，表示無邊框，此時寬度和顏色的設置將被瀏覽器忽略。column-rule-color：用于設置分割線的顏色，可填入CSS顏色值<color>，例如紅色red。缺省值和當前文本顏色color屬性一致。這三個參數(shù)也可以作為獨立的屬性使用，column-rule相當于同時指定了column-rule-*的系列屬性。column-rule的默認值要分別看這三個屬性值的組合結果。例如，為段落元素<p>設置多列之間的分割線樣式：p{column-rule:1pxsolidred;}上述代碼表示文本列與列之間的分割線為1像素寬的紅色實線效果。如果需要兼容低版本的主流瀏覽器，可以把幾種寫法都加入CSS樣式：p{column-rule:1pxsolidred;/*兼容舊版Firefox*/-moz-column-rule:1pxsolidred;/*兼容舊版Safari、Chrome和Opera*/-webkit-column-rule:1pxsolidred;}11.5實驗案例——特殊字體效果的設計與實現(xiàn)功能要求：基于CSS3文本陰影text-shadow屬性制