第11章CSS3技術主講人：XX老師本章學習目標掌握CSS3邊框和背景效果的應用；掌握CSS3文本和字體效果的應用；掌握CSS3變形與動畫效果的應用；掌握CSS3多列效果的應用。目錄11.1CSS3邊框和背景效果11.2CSS3文本和字體效果11.3CSS3變形與動畫效果11.4CSS3多列11.1.1CSS3邊框11.1.2CSS3背景效果11.1CSS3邊框和背景效果11.1.1CSS3邊框CSS3新增了三種邊框效果，分別是：圓角邊框：自定義圓角數(shù)量和弧度的邊框矩形陰影：帶陰影效果的邊框圖片邊框：用自定義圖片素材做邊框11.1.1CSS3邊框表11-1CSS3新增邊框效果屬性一覽屬性名稱解釋border-radius為元素設置圓角邊框。box-shadow為元素設置帶陰影效果的邊框。border-image為元素設置帶有背景圖片的邊框。11.1.1CSS3邊框1CSS3圓角邊框在CSS3中，border-radius屬性可用于直接創(chuàng)建帶有圓角的邊框樣式，該屬性值表示圓角邊框的圓角半徑長度，數(shù)值越大則圓的弧度越明顯。其語法格式如下：border-radius屬性的取值有以下兩種形式：<length>：使用長度值規(guī)定圓角半徑的長度，該值不可為負數(shù)。<percentage>：使用百分比規(guī)定圓角半徑的長度，該值不可為負數(shù)。border-radius:<length>|<percentage>;11.1.1CSS3邊框1CSS3圓角邊框例如，為段落元素p設置圓角邊框，其中圓角半徑為20像素：p{border-radius:20px}11.1.1CSS3邊框1CSS3圓角邊框主流瀏覽器對CSS3中的border-radius屬性支持情況一覽瀏覽器EdgeFirefoxChromeSafariOpera支持情況9.0及以上版本4.0及以上版本5.0及以上版本5.0及以上版本10.5及以上版本11.1.1CSS3邊框1CSS3圓角邊框注：部分主流瀏覽器在支持CSS3標準的border-radius屬性寫法之前使用特定的前綴實現(xiàn)此功能，具體情況如下：Firefox：2.0-12.0版本支持使用-moz-前綴，寫成-moz-border-radius。Chrome：4.0-43.0版本支持使用-webkit-前綴，寫成-webkit-border-radius。Safari：3.1-8.1版本支持使用-webkit-前綴，寫成-webkit-border-radius。Opera：10.5-28.0版本支持使用-webkit-前綴，寫成-webkit-border-radius。11.1.1CSS3邊框1CSS3圓角邊框CSS3圓角邊框屬性值一覽表屬性值解釋border-radius用于定義邊框四個角的弧度border-top-left-radius用于定義邊框左上角的弧度border-top-right-radius用于定義邊框右上角的弧度border-bottom-left-radius用于定義邊框左下角的弧度border-bottom-right-radius用于定義邊框右下角的弧度以上4種border-*-radius屬性均與border-radius屬性取值方式相同，可以使用長度值或百分比的形式表示。11.1.1CSS3邊框1CSS3圓角邊框【例11-1】CSS3圓角邊框效果11.1.1CSS3邊框2CSS3矩形陰影在CSS3中，box-shadow屬性可以為邊框添加陰影，該屬性適用于所有元素。box-shadow的默認屬性值為none，表示無陰影效果。其語法格式如下：

參數(shù)解釋如下：xoffset：表示陰影在水平方向（x軸）上的偏移距離，取值為CSS長度值<length>。yoffset：表示陰影在垂直方向（y軸）上的偏移距離，取值為CSS長度值<length>。width：表示陰影的寬度，取值為CSS長度值<length>。color：表示陰影的顏色效果，取值為CSS顏色值<color>。box-shadow:xoffsetyoffsetwidthcolor11.1.1CSS3邊框2CSS3矩形陰影例如，為矩形添加一個15px寬的灰色陰影，映射在右下角。div{

box-shadow:10px10px15pxgray}11.1.1CSS3邊框2CSS3矩形陰影主流瀏覽器對CSS3中的box-shadow屬性支持情況一覽瀏覽器EdgeFirefoxChromeSafariOpera支持情況9.0及以上版本4.0及以上版本10.0及以上版本5.1及以上版本10.5及以上版本11.1.1CSS3邊框2CSS3矩形陰影注：部分主流瀏覽器在統(tǒng)一支持CSS3的box-shadow屬性之前使用特定的前綴實現(xiàn)此功能，具體情況如下：Firefox：4.0-12.0版本支持使用-moz-前綴，寫成-moz-box-shadow。Chrome：4.0-43.0版本支持使用-webkit-前綴，寫成-webkit-box-shadow。Safari：3.1-8.1版本支持使用-webkit-前綴，寫成-webkit-box-shadow。Opera：10.5-28.0版本支持使用-webkit-前綴，寫成-webkit-box-shadow。11.1.1CSS3邊框2CSS3矩形陰影【例11-2】CSS3矩形陰影效果

11.1.1CSS3邊框3CSS3圖像邊框在CSS3中，border-image屬性可以元素添加自定義圖像效果的邊框，該屬性適用于所有元素。主流瀏覽器對CSS3中的border-image屬性支持情況一覽瀏覽器EdgeFirefoxChromeSafariOpera支持情況11.0及以上版本15.0及以上版本16.0及以上版本6.0及以上版本15.0及以上版本11.1.1CSS3邊框3CSS3圖像邊框

注：部分主流瀏覽器在支持CSS3標準的border-image屬性寫法之前使用特定的前綴實現(xiàn)此功能，具體情況如下：Firefox：3.5-14.0版本支持使用-moz-前綴，寫成-moz-border-image。Chrome：4.0-15.0版本支持使用-webkit-前綴，寫成-webkit-border-image。Safari：3.1-5.1版本支持使用-webkit-前綴，寫成-webkit-border-image。11.1.1CSS3邊框3CSS3圖像邊框CSS3圖片邊框屬性一覽表屬性名稱解釋border-image-source用于設置或獲取元素邊框的圖像來源路徑。其默認值為none，表示無背景圖片。border-image-slice用于設置或獲取邊框圖片的分割方式。border-image-width用于設置或獲取邊框厚度。border-image-outset用于設置或獲取邊框背景圖超出邊框的量。border-image-repeat用于設置或獲取邊框圖片的平鋪狀態(tài)。其默認值為stretch。border-image復合屬性，用于定義邊框圖片的全部設置。11.1.1CSS3邊框3CSS3圖像邊框border-image-slice屬性有三種取值，解釋如下：<number>：使用數(shù)值規(guī)定寬度，允許是整數(shù)或浮點數(shù)，不可以是負數(shù)。<percentage>：使用百分比規(guī)定寬度，不可以是負值。fill：保留剪裁后的區(qū)域，這塊區(qū)域的平鋪方式依據(jù)border-image-repeat的規(guī)定。注：border-image-slice屬性的默認值為100%。11.1.1CSS3邊框3CSS3圖像邊框border-image-repeat屬性有三種取值，解釋如下：repeat：定義用重復平鋪的方式填充邊框背景圖。如果圖片碰到邊框的邊界超過部分將被截斷。round：定義用重復平鋪的方式填充邊框背景圖。圖片會根據(jù)邊框尺寸動態(tài)調整圖片大小，直至正好可以鋪滿整個邊框。stretch：定義用拉伸圖片的方式填充邊框背景圖。該屬性值為默認值。注：事實上border-image-repeat屬性在標準中還有一個取值為space，由于目前所有的主流瀏覽器均不支持該屬性，因此沒有列入表中。11.1.1CSS3邊框3CSS3圖像邊框border-image是一種簡寫形式，用于一次性定義若干種border-image-*屬性。其聲明常用順序如下（省略border-image-前綴）：[source][slice][width][outset][repeat]border-image屬性的默認值為none100%10stretch，如果其中部分屬性省略不寫，則取其對應的默認值。11.1.1CSS3邊框3CSS3圖像邊框如果同時設置了border-style與border-image屬性，瀏覽器會優(yōu)先顯示border-image規(guī)定的樣式效果。當border-image屬性值為none或者指定的圖像不可見時將會顯示border-style所定義的邊框樣式。11.1.1CSS3邊框3CSS3圖像邊框例如，為段落元素p同時設置普通邊框樣式與圖片邊框樣式：p{border:2pxsolidred;border-image:url(image/test.jpg)10;}上述代碼同時定義了border屬性與border-image屬性，如果border-image中指定的圖片不可見或尚未被加載，則以border屬性規(guī)定的樣式顯示；如果圖片加載成功，則只顯示border-image規(guī)定的邊框樣式。11.1.1CSS3邊框3CSS3圖像邊框【例11-3】CSS3圖像邊框效果

11.1.2CSS3背景效果CSS3新增了三種背景效果，可用于自定義背景圖片或顏色的繪制區(qū)域、位置和尺寸。屬性名稱解釋background-clip自定義背景圖片的繪制區(qū)域。background-origin自定義背景圖片的位置。background-size自定義背景圖片的尺寸。CSS3新增背景效果屬性一覽11.1.2CSS3背景效果1自定義背景圖片繪制區(qū)域在CSS3中，background-clip屬性可用于剪裁元素的背景圖片或顏色區(qū)域，使其只顯示指定的區(qū)域內(nèi)容。其語法格式如下：background-clip:border-box|padding-box|content-box|text;11.1.2CSS3背景效果background-clip:border-box|padding-box|content-box|text;background-clip屬性的取值有以下4種形式：padding-box：只保留元素內(nèi)邊距之內(nèi)的背景區(qū)域，包括內(nèi)邊距本身。border-box：只保留元素邊框之內(nèi)的背景區(qū)域，包括邊框本身。content-box：只保留元素內(nèi)容區(qū)域的背景。該屬性值是默認值。text：只保留前景內(nèi)容（例如文字）的形狀，其他區(qū)域的背景圖像均去掉。該取值必須將屬性名稱寫成-webkit-background-clip方可使用。1自定義背景圖片繪制區(qū)域11.1.2CSS3背景效果1自定義背景圖片繪制區(qū)域

注：部分主流瀏覽器在完全支持background-clip屬性之前的情況如下：Firefox：3.6版本支持使用-moz-前綴，寫成-moz-background-clip。其中2.0-38.0版本不支持text屬性值。主流瀏覽器對CSS3中的background-clip屬性支持情況一覽瀏覽器EdgeFirefoxChromeSafariOpera支持情況9.0及以上版本4.0及以上版本4.0及以上版本6.0及以上版本15.0及以上版本11.1.2CSS3背景效果1自定義背景圖片繪制區(qū)域【例11-4】CSS3background-clip屬性的應用11.1.2CSS3背景效果2自定義背景圖片位置在CSS3中，background-origin屬性可用于剪裁元素的背景圖片，使其只顯示指定的區(qū)域內(nèi)容。該屬性必須與background-image屬性配合使用，否則沒有圖片來源則無法對背景圖片進行定位。11.1.2CSS3背景效果2自定義背景圖片位置background-origin屬性的語法格式如下：background-origin:border-box|padding-box|content-box;background-origin屬性的參數(shù)表示背景圖片的位置，有以下3種取值：padding-box：從元素內(nèi)邊距開始顯示背景圖像，該屬性值是默認值。border-box：從元素邊框開始顯示背景圖像。content-box：從元素內(nèi)容區(qū)域開始顯示背景圖像。11.1.2CSS3背景效果2自定義背景圖片位置瀏覽器EdgeFirefoxChromeSafariOpera支持情況9.0及以上版本4.0及以上版本4.0及以上版本6.0及以上版本15.0及以上版本主流瀏覽器對CSS3中的background-origin屬性支持情況一覽11.1.2CSS3背景效果2自定義背景圖片位置【例11-5】CSS3background-origin屬性的應用

11.1.2CSS3背景效果3自定義背景圖片尺寸在CSS3中，background-size屬性可用于定義元素背景圖片的尺寸大小。其語法格式如下：background-size:<bg-size>[,<bg-size>];11.1.2CSS3背景效果3自定義背景圖片尺寸background-size屬性的格式解釋如下：background-size的<bg-size>參數(shù)表示背景圖片的位置，有以下5種取值：<length>：使用長度值規(guī)定背景圖像的大小，該值不可為負數(shù)。<percentage>：使用百分比規(guī)定背景圖像的大小，該值不可為負數(shù)。auto：背景圖像的真實大小。cover：將背景圖像等比例縮放到完全覆蓋容器。由于圖像有可能與容器比例不一致導致部分背景圖像超出容器范圍。contain：將背景圖像等比例縮放到寬度或高度與容器保持一致。背景圖像始終在容器中，不會超出容器的范圍。11.1.1CSS3邊框3自定義背景圖片尺寸如果只有單個參數(shù)則用于表示寬度的樣式，高度默認為跟隨寬度等比例縮放。例如：p{background-size:200px;}上述代碼表示將段落元素<p>的背景圖片寬度縮放為200像素，高度會隨著寬度等比例縮放。11.1.1CSS3邊框3自定義背景圖片尺寸如果有2個參數(shù)則第一個參數(shù)表示寬度，第二個參數(shù)表示高度。例如：p{background-size:200px300px;}上述代碼表示將段落元素<p>的背景圖片寬度縮放為200像素、高度縮放為300像素。11.1.2CSS3背景效果3自定義背景圖片尺寸主流瀏覽器對CSS3中的background-size屬性支持情況一覽瀏覽器EdgeFirefoxChromeSafariOpera支持情況9.0及以上版本4.0及以上版本15.0及以上版本7.0及以上版本15.0及以上版本注：部分主流瀏覽器在完全支持background-size屬性之前的情況如下：Firefox：3.6版本支持使用-moz-前綴，寫成-moz-background-size。Chrome：4.0-14.0版本支持使用background-size，但不可縮寫到background屬性中。Safari：6.0-6.1版本支持使用background-size，但不可縮寫到background屬性中。11.1.2CSS3背景效果3自定義背景圖片尺寸【例11-6】CSS3自定義背景圖像尺寸效果

11.2.1CSS3文本11.2.2CSS3字體11.2CSS3文本和字體效果11.2.1CSS3文本CSS3新增了兩種文本效果，分別是為文本添加陰影效果和長單詞強制換行效果。具體屬性名稱如表所示。CSS3新增文本效果屬性一覽屬性名稱解釋text-shadow用于為指定的文本添加陰影效果。word-wrap用于實現(xiàn)長單詞強制換行效果。11.2.1CSS3文本1CSS3文本陰影CSS3使用text-shadow屬性為指定文本添加陰影效果。其基本格式如下：text-shadow:xoffsetyoffsetwidthcolor11.2.1CSS3文本1CSS3文本陰影參數(shù)解釋如下：xoffset：指的是陰影距離原文字內(nèi)容在橫向上的偏移距離。取值為CSS長度值<length>，可以為負值。yoffset：指的是陰影距離原文字內(nèi)容在縱向上的偏移距離。取值為CSS長度值<length>，可以為負值。width：表示陰影的模糊半徑，半徑越大陰影面積越大，顯示效果越模糊，該值如果缺省則陰影和正文的面積大小完全一樣。取值為CSS長度值<length>，不能為負值。color：表示陰影的顏色效果，取值為CSS顏色值<color>。該值如果缺省在Chrome瀏覽器中不會顯示陰影，而在Firefox和Opera瀏覽器中將直接使用字體顏色作為陰影顏色。注：text-shadow的默認屬性值為none，表示無陰影效果。11.2.1CSS3文本1CSS3文本陰影例如：h3{text-shadow:5px5pxred}指的是在目標文本內(nèi)容右邊5px和下面5px的地方渲染紅色陰影。11.2.1CSS3文本1CSS3文本陰影主流瀏覽器對CSS3中的text-shadow屬性支持情況如表所示。主流瀏覽器對CSS3中的text-shadow屬性支持情況一覽瀏覽器EdgeFirefoxChromeSafariOpera支持情況9.0及以上版本4.0及以上版本4.0及以上版本6.0及以上版本15.0及以上版本

注：部分主流瀏覽器在完全支持text-shadow屬性之前的情況如下：Firefox：3.6版本支持使用-moz-前綴，寫成-moz-text-shadow。其中2.0-38.0版本不支持text屬性值。11.2.1CSS3文本1CSS3文本陰影【例11-7】CSS3文本陰影簡單效果

11.2.1CSS3文本1CSS3文本陰影【例11-8】CSS3文本陰影特殊效果

（文字發(fā)光、凹凸紋理、文字描邊等效果）

11.2.1CSS3文本2CSS3文字換行CSS3使用word-wrap屬性規(guī)定文本的換行規(guī)則，可以將長單詞斷開換到下一行繼續(xù)顯示。其語法格式如下：word-wrap:normal|break-word;word-wrap屬性的取值有以下兩種形式：normal：指的是只允許在斷字點換行，如果單詞較長則直接溢出邊界不會自動換行。該屬性值為默認值。break-word：指的是文本內(nèi)容允許在邊界內(nèi)換行，如果單詞較長將在內(nèi)部斷開換行。注：word-wrap的默認屬性值為none，表示無陰影效果。11.2.1CSS3文本2CSS3文字換行例如：p{word-wrap:break-word;}上述代碼表示段落元素<p>中的文字內(nèi)容強制在元素邊界處換行。11.2.1CSS3文本2CSS3文字換行主流瀏覽器對CSS3中的text-shadow屬性支持情況如表所示。主流瀏覽器對CSS3中的text-shadow屬性支持情況一覽瀏覽器EdgeFirefoxChromeSafariOpera支持情況9.0及以上版本4.0及以上版本4.0及以上版本6.0及以上版本15.0及以上版本

注：部分主流瀏覽器在完全支持text-shadow屬性之前的情況如下：Firefox：3.6版本支持使用-moz-前綴，寫成-moz-text-shadow。其中2.0-38.0版本不支持text屬性值。11.2.1CSS3文本2CSS3文字換行【例11-9】CSS3文本強制換行效果11.2.2CSS3字體在CSS3之前，瀏覽器只能顯示設備上已安裝的字體。目前在CSS3中，通過@font-face的規(guī)則，網(wǎng)頁可以顯示任何字體。當有特殊字體時，可以將其放在服務器端，在瀏覽頁面時會被自動下載到用戶的設備終端。11.2.2CSS3字體其語法規(guī)則如下：@font-face{font-family:<identifier>;src:<url>[format(<string>)]}11.2.2CSS3字體例如：@font-face{font-family:'diyfont';src:url('diyfont.ttf')format('truetype')}其中font-family的名稱可以自定義，然后在CSS樣式聲明font屬性時使用該名稱即可。p{font-family:'diyfont';}11.2.2CSS3字體瀏覽器對@font-face的支持情況瀏覽器EdgeFirefoxChromeSafariOpera支持情況9.0及以上版本4.0及以上版本4.0及以上版本6.0及以上版本15.0及以上版本

注：部分主流瀏覽器在完全支持text-shadow屬性之前的情況如下：Firefox：3.6版本支持使用-moz-前綴，寫成-moz-text-shadow。其中2.0-38.0版本不支持text屬性值。11.2.2CSS3字體目前各類瀏覽器中的常用字體格式有如下四種：TrueType(.ttf)：中文稱為“全真”字體，該字體由微軟與蘋果公司聯(lián)合提出，使用數(shù)學函數(shù)定義字體輪廓，因此也被稱為輪廓字體。；WebOpenFontFormat(.woff)：中文稱為“開放字體格式”，該字體不包含加密內(nèi)容，目前由W3C組織的Web字體工作組進行標準化；EmbeddedOpenType(.eot)：這是一種壓縮字庫，可以解決網(wǎng)頁中加載特殊字體的問題。該字體目前只有IE瀏覽器（微軟已于2023年2月14日正式禁用）可以支持；SVG(.svg)：SVG的全稱是ScalableVectorGraphics（可縮放矢量圖），它使用二維矢量圖來顯示字體，也是由W3C制定的一種開放標準。11.2.2CSS3字體【例11-10】CSS3自定義字體效果字體來源于本地font文件夾中的litte.ttf文件。11.3.1CSS32D變形11.3.2CSS3

Transition動畫11.3.3CSS3Animation動畫11.3CSS3變形與動畫效果11.3.1CSS32D變形CSS3中的transform屬性用于元素變形，它能夠實現(xiàn)對元素進行移動、收縮、旋轉等2D動畫效果。11.3.1CSS32D變形主流瀏覽器對transform屬性的2D效果支持情況一覽瀏覽器EdgeFirefoxChromeSafariOpera支持情況10.0及以上版本16.0及以上版本36.0及以上版本9.0及以上版本23.0及以上版本補充說明如下：Firefox：3.5-15.0版本支持使用前綴-moz-，寫成-moz-transform的形式。Chrome：4.0-35.0版本支持使用前綴-webkit-，寫成-webkit-transform的形式。Safari：6.0-8.0版本支持使用前綴-webkit-，寫成-webkit-transform的形式。Opera：15.0-22.0版本支持使用前綴-webkit-，寫成-webkit-transform的形式。11.3.1CSS32D變形transform屬性有如下5種方法，具體可以查看表。方法名稱解釋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的變形。transform屬性方法一覽表11.3.1CSS32D變形1移動translate()CSS3transform屬性的translate()方法可用于在頁面上平移元素，包括水平方向與垂直方向均可指定偏移量。其語法格式如下：transform:translate(x[,y]);其中參數(shù)x表示水平方向x軸上的移動距離，參數(shù)y表示垂直方向y軸上的移動距離。如果省略參數(shù)y，則默認y軸上的移動距離為0。11.3.1CSS32D變形1移動translate()例如：p{transform:translate(10px,20px);}上述代碼表示段落元素<p>從初始位置往右移動10像素、往下移動20像素。11.3.1CSS32D變形1移動translate()也可以單獨使用translateX()或translateY()方法指定水平或垂直其中一個方向上的移動距離。語法格式如下：例如：transform:translateX(x);p{transform:translateX(10px);}上述代碼表示元素從左側往右移動10像素。11.3.1CSS32D變形1移動translate()【例11-11】CSS32D移動效果11.3.1CSS32D變形2旋轉rotate()CSS3transform屬性的rotate()方法可用于在頁面上旋轉元素。其語法格式如下：transform:rotate(<angle>);參數(shù)<angle>表示元素順時針旋轉指定的角度，屬性值為CSS角度值。11.3.1CSS32D變形2旋轉rotate()例如：p{transform:rotate(30deg);}上述代碼表示段落元素<p>從初始位置順時針旋轉30度。11.3.1CSS32D變形2旋轉rotate()【例11-12】CSS32D旋轉效果11.3.1CSS32D變形3縮放scale()CSS3transform屬性的scale()方法可用于在頁面上放大或縮小元素。其語法格式如下：transform:scale(x[,y]);其中參數(shù)x表示水平方向x軸上的縮放倍數(shù)，參數(shù)y表示垂直方向y軸上的縮放倍數(shù)。如果省略參數(shù)y，則默認y軸上的縮放倍數(shù)與x軸相同。屬性取值為CSSS數(shù)值<number>，允許是整數(shù)或者浮點數(shù)，其中取值為1表示原始尺寸沒有進行縮放。11.3.1CSS32D變形3縮放scale()例如：p{transform:scale(2,3);}上述代碼表示段落元素<p>寬度放大為原始尺寸的2倍，高度放大為原先的3倍。11.3.1CSS32D變形3縮放scale()也可以單獨使用scaleX()或scaleY()方法指定水平或垂直其中一個方向上的縮放倍數(shù)。指定元素水平方向縮放的語法格式如下：指定元素垂直方向縮放的語法格式如下：transform:scaleX(x);transform:scaleY(y);11.3.1CSS32D變形3縮放scale()【例11-13】CSS32D縮放效果11.3.1CSS32D變形4翻轉skew()CSS3transform屬性的skew()方法可用于在頁面上翻轉元素。其語法格式如下：transform:skew(<angleX>[,<angleY>]);其中第一個參數(shù)<angleX>表示水平方向x軸上的傾斜扭曲角度，第二個參數(shù)<angleY>表示水平方向y軸上的傾斜扭曲角度。如果省略參數(shù)y，則默認值為0。屬性取值為CSSS角度值<angle>。11.3.1CSS32D變形4翻轉skew()例如：p{transform:skew(20deg,10deg);}上述代碼表示將段落元素<p>橫向傾斜20度，縱向傾斜10度。11.3.1CSS32D變形4翻轉skew()也可以單獨使用skewX()或skewY()方法指定水平或垂直其中一個方向上的翻轉情況。指定元素水平方向x軸翻轉的語法格式如下：指定元素垂直方向y軸翻轉的語法格式如下：transform:skewX(<angle>);transform:skewY(<angle>);11.3.1CSS32D變形4翻轉skew()【例11-14】CSS32D翻轉效果11.3.1CSS32D變形5矩陣變換matrix()CSS3transform屬性的matrix()方法是以矩陣變換的數(shù)學函數(shù)實現(xiàn)元素的變形效果。其語法格式如下：transform:matrix(m11,m12,m21,m22,dx,dy);其中(m11,m12,m21,m22)表示矩陣，元素變換前的坐標點(x,y)與矩陣相乘換算后得到新的坐標點，最后分別加上參數(shù)dx和dy的偏移量得到最終坐標結果。11.3.1CSS32D變形5矩陣變換matrix()CSS3transform屬性的matrix()方法是以矩陣變換的數(shù)學函數(shù)實現(xiàn)元素的變形效果。其語法格式如下：transform:matrix(m11,m12,m21,m22,dx,dy);其中(m11,m12,m21,m22)表示矩陣，元素變換前的坐標點(x,y)與矩陣相乘換算后得到新的坐標點，最后分別加上參數(shù)dx和dy的偏移量得到最終坐標結果。11.3.1CSS32D變形5矩陣變換matrix()【例11-15】CSS32D矩陣變形效果

由于matrix()變形的函數(shù)轉換比較復雜，假如只需進行基本變形，可以直接使用translate()、rotate()、scale()或skew()方法實現(xiàn)。11.3.2CSS3

Transition動畫CSS3中的Transition動畫又稱為過渡動畫，在指定時間內(nèi)可以將元素從原始樣式逐漸變化為新的樣式。通?？捎糜谑髽藨彝Ｔ谠厣习l(fā)生動畫事件。11.3.2CSS3

Transition動畫transition動畫包含5種屬性，具體可以查看下表。屬性名稱解釋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.2CSS3

Transition動畫1.漸變屬性transition-property在CSS3中transition-property屬性用于指定需要發(fā)生漸變的CSS屬性名稱，其語法格式如下：transition-property:none|all|property;transition-property屬性的取值有以下3種形式：none：沒有任何屬性獲得漸變效果。all：所有屬性都獲得漸變效果。property：設置漸變效果的CSS屬性名稱。如果是多個屬性則以列表的形式出現(xiàn)，中間用逗號隔開。11.3.2CSS3

Transition動畫1.漸變屬性transition-property例如，為段落元素p指定需要產(chǎn)生漸變效果的CSS屬性名稱：p{transition-property:width,height;}上述代碼表示同時設置元素的寬度和高度發(fā)生漸變效果。11.3.2CSS3

Transition動畫1.漸變屬性transition-property如果需要兼容低版本的主流瀏覽器，可以把幾種寫法都加入CSS樣式：：p{transition-property:width,height;/*兼容舊版Firefox*/-moz-transition-property:width,height;/*兼容舊版SafariandChrome*/-webkit-transition-property:width,height;}該屬性通常需要與tranisition-duration屬性配合使用，否則時長為0看不出漸變效果。11.3.2CSS3

Transition動畫1.漸變屬性transition-property漸變屬性transition-property支持的常見CSS屬性參考如下：顏色值：背景顏色background-color、字體顏色color、邊框顏色border-color等。長度或百分比：寬度width、高度height、外邊距margin、內(nèi)邊距padding等。數(shù)值：透明度opacity、字號font-size、字體粗細font-weight等。11.3.2CSS3

Transition動畫2.漸變持續(xù)時間transition-duration在CSS3中transition-duration屬性用于指定漸變動畫效果的持續(xù)時長，持續(xù)時間越長漸變效果越慢。其語法格式如下：transition-duration:<time>;該屬性值單位為秒或者毫秒。其缺省狀態(tài)為0s，元素會瞬間從原始狀態(tài)變成最終狀態(tài)，無法顯示動畫漸變過程，因此不建議省略transition-duration屬性的設置。11.3.2CSS3

Transition動畫2.漸變持續(xù)時間transition-duration例如，為段落元素p指定漸變持續(xù)時間為10秒：p{transition-duration:10s;}11.3.2CSS3

Transition動畫2.漸變持續(xù)時間transition-duration如果需要兼容低版本的主流瀏覽器，可以把幾種寫法都加入CSS樣式：p{transition-duration:10s;/*兼容舊版Firefox*/-moz-transition-duration:10s;/*兼容舊版SafariandChrome*/-webkit-transition-duration:10s;}11.3.2CSS3

Transition動畫2.漸變持續(xù)時間transition-duration【例11-16】CSS3設置漸變動畫持續(xù)時間

11.3.2CSS3

Transition動畫3.漸變速率函數(shù)transition-timing-function在CSS3中transition-timing-function用于設置漸變速率函數(shù)。其語法格式如下：transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier;transition-timing-function屬性的取值常見以下6種形式：linear：勻速。該值等同于貝塞爾曲線(0.0,0.0,1.0,1.0)。ease：逐漸變慢。該值為默認值，等同于貝塞爾曲線(0.25,0.1,0.25,1.0)。ease-in：加速。該值等同于貝塞爾曲線(0.42,0,1.0,1.0)。ease-out：減速。該值等同于貝塞爾曲線(0,0,0.58,1.0)。ease-in-out：先加速再減速。該值為默認值，等同于貝塞爾曲線(0.42,0,0.58,1.0)。cubic-bezier：使用貝賽爾曲線函數(shù)自定義速度變化。11.3.2CSS3

Transition動畫4.漸變延遲時間transition-delay在CSS3中transition-delay屬性用于指定漸變動畫延遲播放的時間，延遲時間越長則動畫越晚播放。其語法格式如下：例如，為段落元素p指定漸變延遲時間為10秒：transition-delay:<time>;該屬性值單位為秒或者毫秒。其缺省狀態(tài)為0s，表示不延遲立刻播放動畫效果。p{transition-delay:10s;}11.3.2CSS3

Transition動畫4.漸變延遲時間transition-delay如果需要兼容低版本的主流瀏覽器，可以把幾種寫法都加入CSS樣式：p{transition-delay:10s;/*兼容舊版Firefox*/-moz-transition-delay:10s;/*兼容舊版SafariandChrome*/-webkit-transition-delay:10s;}11.3.2CSS3

Transition動畫5.漸變復合屬性transition在CSS3中transition屬性用于一次性指定所有的動畫設置要求，是一個復合屬性。其聲明常用順序如下:[transition-property][transition-duration][transition-timing-function][transition-delay]參數(shù)之間使用空格隔開即可，如有未聲明的參數(shù)取其默認值。需要注意的是，如果只提供了一個時間參數(shù)，無論其位置在何處均默認為是transition-duration屬性值。11.3.2CSS3

Transition動畫5.漸變復合屬性transition例如，為段落元素p指定一系列漸變效果:使用復合屬性transition可簡寫為：p{transition-property:background-color;transition-duration:10s;transition-timing-function:ease-in;transition-delay:10s;}p{transition:background-color10sease-in10s;}11.3.2CSS3

Transition動畫5.漸變復合屬性transition還可以使用復合屬性transition同時指定多種漸變，之間用逗號隔開即可。例如:p{transition:background-color10sease-in10s,color10sease-in10s,width10sease-in10s;}11.3.2CSS3

Transition動畫【例11-17】CSS3Transition動畫效果

11.3.3CSS3Animation動畫CSS3可以創(chuàng)建Animation動畫效果。該動畫可以自定義任意多個關鍵時間點的樣式效果，瀏覽器將自動處理兩個關鍵時間節(jié)點之間的漸變效果，所有的關鍵幀組合在一起形成更復雜的動畫效果。在網(wǎng)頁文檔中使用可取代Flash動畫、動態(tài)圖片和JavaScript。11.3.3CSS3Animation動畫animation動畫相關屬性一覽表屬性名稱解釋@keyframes用于設置自定義動畫內(nèi)容。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.3.3CSS3Animation動畫1.@keyframes規(guī)則幀（frame）是影像動畫中最小單位的單幅影像畫面，一幀就相當于一副靜止的畫面，連續(xù)的幀可以形成動畫效果。在CSS3中使用@keyframes規(guī)則定義一套動畫效果中若干個關鍵幀的樣式效果，其格式如下：@keyframes動畫名稱{from{樣式要求}to{樣式要求}}11.3.3CSS3Animation動畫1.@keyframes規(guī)則其中動畫名稱可以自定義，from表示起始幀的樣式，to表示最終幀的樣式。例如，定義一個名稱為myframe的動畫，要求背景顏色起始為紅色，最終變?yōu)辄S色，其寫法如下：@keyframesmyframe{from{background-color:red}to{background-color:yellow}}11.3.3CSS3Animation動畫1.@keyframes規(guī)則如果需要更豐富的動畫效果，可以使用百分比來表示時間刻度。百分比的數(shù)值必須從0%開始到100%結束，中間的時間百分比數(shù)值和數(shù)量都可以自定義。這里的0%相當于關鍵詞from的效果，100%相當于關鍵詞to的效果。例如：@keyframes動畫名稱{0%{樣式要求}25%{樣式要求}50%{樣式要求}75%{樣式要求}100%{樣式要求}}11.3.3CSS3Animation動畫1.@keyframes規(guī)則創(chuàng)建完成的動畫必須指定時長并綁定到目標元素中方可生效。例如將剛才使用@keyframes創(chuàng)建的myframe動畫使用到段落標簽<p>上的寫法如下：p{animation:myframe8s;}上述代碼表示在8秒的時間范圍內(nèi)讓段落元素<p>進行名稱為myframe的動畫內(nèi)容。這里使用了復合屬性animation的簡寫形式，同時規(guī)定了動畫名稱與動畫的持續(xù)時間。11.3.3CSS3Animation動畫2.動畫應用名稱animation-name在CSS3中animation-name屬性專門用于指定需要發(fā)生的動畫名稱。該屬性值需要配合@keyframes規(guī)則使用，因為這里的動畫名稱不可以自定義，必須是在@keyframes規(guī)則中已聲明的動畫效果。其語法格式如下:animation-name:none|<identifier>;animation-name屬性的取值有以下兩種形式：none：不引用任何動畫名稱，該屬性值為默認值。<identifier>：定義一個或多個動畫名稱，該名稱必須來源于@keyframes規(guī)則。11.3.3CSS3Animation動畫2.動畫應用名稱animation-name例如，為段落元素p指定上一節(jié)設置的名稱為myframe的動畫效果:p{animation-name:myframe;}11.3.3CSS3Animation動畫2.動畫應用名稱animation-name如果需要兼容低版本的主流瀏覽器，可以把幾種寫法都加入CSS樣式：p{animation-name:myframe;/*兼容舊版Firefox*/-moz-animation-name:myframe;/*兼容舊版SafariandChrome*/-webkit-animation-name:myframe;}由于默認情況下動畫的持續(xù)時間為0，此時看不到動畫效果。必須配合CSS3Animation動畫中的animation-duration屬性重新規(guī)定動畫時間方可看到完整動畫效果。下一小節(jié)將介紹animation-duration屬性的用法。11.3.3CSS3Animation動畫3.動畫持續(xù)時間animation-duration在CSS3中animation-duration屬性用于指定動畫效果的持續(xù)時長，持續(xù)時間越長動畫效果越慢。其語法格式如下：animation-duration:<time>;該屬性值單位為秒或者毫秒。其缺省狀態(tài)為0s，元素會瞬間從原始狀態(tài)變成最終狀態(tài)，無法顯示動畫過程，因此不建議省略animation-duration屬性的設置。11.3.3CSS3Animation動畫3.動畫持續(xù)時間animation-duration例如，為段落元素p指定剛才的myframe動畫時間為10秒：p{animation-name:myframe;animation-duration:10s;}11.3.3CSS3Animation動畫3.動畫持續(xù)時間animation-duration如果需要兼容低版本的主流瀏覽器，可以把幾種寫法都加入CSS樣式：p{animation-name:myframe;animation-duration:10s;/*兼容舊版Firefox*/-moz-animation-name:myframe;-moz-animation-duration:10s;/*兼容舊版SafariandChrome*/-webkit-animation-name:myframe;-webkit-animation-duration:10s;}11.3.3CSS3Animation動畫4.動畫速率函數(shù)animation-timing-function在CSS3中animation-timing-function用于設置動畫速率函數(shù)。與之前介紹的CSS3Transition動畫中transition-timing-function屬性值類似，animation-timing-function屬性的取值有以下6種形式：linear：線性動畫，表示勻速動畫效果。該值等同于貝塞爾曲線(0.0,0.0,1.0,1.0)。ease：逐漸變慢。該值為默認值，等同于貝塞爾曲線(0.25,0.1,0.25,1.0)。ease-in：表示由慢到快的加速效果。該值等同于貝塞爾曲線(0.42,0,1.0,1.0)。ease-out：表示由快到慢的減速效果。該值等同于貝塞爾曲線(0,0,0.58,1.0)。ease-in-out：先加速再減速。該值為默認值，等同于貝塞爾曲線(0.42,0,0.58,1.0)。cubic-bezier：使用貝茲爾曲線函數(shù)自定義速度變化。11.3.3CSS3Animation動畫5.動畫延遲時間animation-delay在CSS3中animation-delay屬性用于指定動畫延遲播放的時間，延遲時間越長則動畫越晚播放。其語法格式如下：例如，為段落元素p指定漸變延遲時間為10秒：animation-delay:<time>;該屬性值單位為秒或者毫秒。其缺省狀態(tài)為0s，表示不延遲立刻播放動畫效果。p{animation-delay:10s;}11.3.3CSS3Animation動畫5.動畫延遲時間animation-delay如果需要兼容低版本的主流瀏覽器，可以把幾種寫法都加入CSS樣式：p{animation-delay:10s;/*兼容舊版Firefox*/-moz-animation-delay:10s;/*兼容舊版SafariandChrome*/-webkit-animation-delay:10s;}11.3.3CSS3Animation動畫6.動畫循環(huán)次數(shù)animation-iteration-count在CSS3中animation-iteration-count屬性用于設置動畫的循環(huán)播放次數(shù)。其語法格式如下：animation-iteration-count:infinite|<number>;animation-iteration-count屬性的取值有以下兩種形式：infinite：表示無限循環(huán)。<number>：用于規(guī)定動畫循環(huán)播放的具體次數(shù)。該屬性的默認值為1，表示只播放一次動畫效果。11.3.3CSS3Animation動畫6.動畫循環(huán)次數(shù)animation-iteration-count例如，為段落元素p指定循環(huán)播放2次動畫：p{animation-iteration-count:2;}11.3.3CSS3Animation動畫6.動畫循環(huán)次數(shù)animation-iteration-count如果需要兼容低版本的主流瀏覽器，可以把幾種寫法都加入CSS樣式：p{animation-iteration-count:2;/*兼容舊版Firefox*/-moz-animation-iteration-count:2;/*兼容舊版SafariandChrome*/-webkit-animation-iteration-count:2;}11.3.3CSS3Animation動畫7.動畫運動方向animation-direction在CSS3中animation-direction屬性用于指定循環(huán)播放動畫的運動方向。其語法格式如下:animation-direction:normal|reverse|alternate|alternate-reverse;

animation-direction屬性的取值有以下4種形式：normal：正常方向運行動畫，該屬性值也是默認值。reverse：反方向運行動畫。alternate：動畫先正常運行再反向運行，并持續(xù)交替。alternate-reverse：動畫先反向運行再正常運行，并持續(xù)交替。11.3.3CSS3Animation動畫7.動畫運動方向animation-direction例如，為段落元素p設置反向運動的動畫效果:p{animation-direction:reverse;}11.3.3CSS3Animation動畫7.動畫運動方向animation-direction如果需要兼容低版本的主流瀏覽器，可以把幾種寫法都加入CSS樣式:p{animation-direction:reverse;/*兼容舊版Firefox*/-moz-animation-direction:reverse;/*兼容舊版SafariandChrome*/-webkit-animation-direction:reverse;}11.3.3CSS3Animation動畫7.動畫運動方向animation-direction如果需要兼容低版本的主流瀏覽器，可以把幾種寫法都加入CSS樣式:p{animation-direction:reverse;/*兼容舊版Firefox*/-moz-animation-direction:reverse;/*兼容舊版SafariandChrome*/-webkit-animation-direction:reverse;}11.3.3CSS3Animation動畫8.動畫之外狀態(tài)animation-fill-mode在CSS3中animation-fill-mode屬性用于指定動畫效果之外的元素狀態(tài)。其語法格式如下:animation-fill-mode:none|forwards|backwards|both;animation-fill-mode屬性的取值有以下4種形式：none：不設置動畫之外的元素狀態(tài)，該屬性值為默認值。forwards：設置動畫之外的元素狀態(tài)為動畫結束時的樣式。backwards：設置動畫之外的元素狀態(tài)為動畫剛開始時的樣式。both：設置動畫之外的元素狀態(tài)為動畫剛開始或結束時的樣式。11.3.3CSS3Animation動畫8.動畫之外狀態(tài)animation-fill-mode例如，為段落元素p指定動畫之外的狀態(tài)為動畫結束時的樣式:p{animation-fill-mode:backwards;}11.3.3CSS3Animation動畫8.動畫之外狀態(tài)animation-fill-mode如果需要兼容低版本的主流瀏覽器，可以把幾種寫法都加入CSS樣式:p{animation-fill-mode:backwards;/*兼容舊版Firefox*/-moz-animation-fill-mode:backwards;/*兼容舊版SafariandChrome*/-webkit-animation-fill-mode:backwards;}11.3.3CSS3Animation動畫9.動畫運行狀態(tài)animation-play-state在CSS3中animation-play-state屬性用于檢索或設置動畫運行狀態(tài)。其語法格式如下:animation-play-state:running|paused;animation-play-state屬性的取值有以下兩種形式：running：動畫為運行狀態(tài)，該屬性值為默認值。paused：動畫為暫停狀態(tài)。11.3.3CSS3Animation動畫9.動畫運行狀態(tài)animation-play-state例如，當鼠標懸浮在段落元素<p>上時暫停動畫效果:p:hover{animation-play-state:paused;}11.3.3CSS3Animation動畫9.動畫運行狀態(tài)animation-play-state如果需要兼容低版本的主流瀏覽器，可以把幾種寫法都加入CSS樣式:p:hover{animation-play-state:paused;/*兼容舊版Firefox*/-moz-animation-play-state:paused;/*兼容舊版SafariandChrome*/-webkit-animation-play-state:paused;}11.3.3CSS3Animation動畫10.動畫復合屬性animation在CSS3中animation屬性用于一次性指定所有的動畫設置要求，是一個復合屬性。其聲明常用順序如下:[animation-name][animation-duration][animation-timing-function][animation-delay][animation-iteration-count][animation-direction][animation-fill-mode][animation-play-state]參數(shù)之間使用空格隔開即可，如有未聲明的參數(shù)取其默認值。需要注意的是，如果只提供了一個時間參數(shù)，無論其位置在何處均默認為是transition-duration屬性值。11.3.3CSS3Animation動畫10.動畫復合屬性animation例如，為段落元素p指定一系列動畫效果:使用復合屬性animation可簡寫為:p{animation-name:myAnimation;animation-duration:10s;animation-timing-function:ease-in;animation-delay:10s;}p{animation:myAnimation10sease-in10s;}11.3.3CSS3Animation動畫10.動畫復合屬性animation還可以使用復合屬性animation同時指定多種動畫，之間用逗號隔開即可。例如:p{animation:myAnimation110sease-in10s,myAnimation210sease-in10s,myAnimation310sease-in10s;}11.3.3CSS3An