一， CSS3 盒子 陰影 屬性 box- shadow 也是 CSS3 新增 的 一個 重要 屬性， 用來 定義 元素 的 盒子 陰影。

1. inset： 陰影 型別， 可選 值。 如果不 設定， 其 預設 的 投影 方式 是 外 陰影； 如果 取其 唯一 值“ inset”， 就是 給 元素 設定 內 陰影。
2. x- offset： 陰影水平偏移量， 其值可以是正負值。 如果取正值， 則 陰影 在 元素 的 右邊， 反之 取 負值， 陰影 在 元素 的 左邊。
3. y- offset： 陰影垂直偏移量， 其值可以是正負值。 如果取正值， 則 陰影 在 元素 的 底部， 反之 取 負值， 陰影 在 元素 的 頂部。
4. http:/ /www.iis7.com/b/wzjk/
5. blur- radius： 陰影模糊半徑， 可選引數。 其值只能是正值， 如果 取值 為“ 0” 時， 表示 陰影 不具 有 模糊 效果， 如果 取值 越大， 陰影 的 邊緣 就 越 模糊。
6. spread- radius： 陰影 擴充套件 半徑， 可選引數。 其值可以是正負值， 如果 取值 為 正值， 則 整個 陰影 都 延展 擴大， 反之 取值 為 負值， 則 整個 陰影 都 縮小。
7. color： 陰影 顏色， 可選 引數， 如果不設定任何顏色 時， 瀏覽器會取預設色， 但 各瀏覽器 預設色不一樣，
8. 在圖片上加內陰影，先給圖片新增一個容器，如：div等， 二， border-radius 圓角
9. 圓形 border- radius 製作 圓角 有兩 點 技巧。 ·元素 的 寬度 和 高度 相同。 ·圓角 的 半徑 值 為 元素 寬度 或 寬度 的 一半 或者 直接 設定 圓角 半徑 值 為 50%。
10. 半圓 border- radius 製作半圓與製作圓形的方法是一樣 的， 只是元素的 寬度與圓角方位要配合一致， 不同的寬度和高度比例， 以及圓角方位， 可以製作上半圓、下半圓、 左半圓 和 右半圓 效果。
11. 扇形 border- radius 製作 扇形， 其實 就是 使用 border- radius 屬性 製作 四分之一 圓形。 遵循“ 三 同， 一 不同” 原則， 其中“ 三 同” 是指 元素 的 寬度、 高度 和 圓角 半徑 值 相同， 而“ 一 不同” 指的 是 圓角 位置 不同。 根據 圓角 取值 位置 不一樣， 可以分 左上、 右上、 右下 和 左下 四種 扇形 效果。
12. 橢圓 橢圓 其實 就是 一個 圓形 受到 擠壓 而成 的 一種 形狀， border- radius 製作 橢圓 也非 常 方便， 只 受限 於 元素 的 寬度 或 高度， 然後 就是 圓角 半徑， 製作 橢圓 的 圓角 半徑 和 其他 圖形 有所 不一樣， 需要 設定 圓角 的 水平 和 垂直 方向 的 半徑 值。 橢圓 有 兩種， 一種 是 水平 的， 另外 一種 是 垂直 的。 它們 之間 的 差別 只是 方向 性的 區別， 其 製作 方法 是 一樣 的。 製作 水平 橢圓， 元素 寬度 是 高度 的 2 倍， 而且 border- radius 的 水平 半徑 等於 元素 寬度， 垂直 半徑 等於 元素 高度； 而 垂直 橢圓 剛好 與水 平 橢圓 的 引數 相反。 。。。。。。 三， CSS3 背景 背景主要包括五個屬性： 1· background- color（ 背景 顏色） 2· background- image（ 背景 圖片） 3· background- repeat（ 背景 圖片 展示 方式） 4· background- attachment（ 背景 圖片 是 固定 還是 滾動） 5· background- position（ 背景 圖片 位置） 可以單獨寫， 也可以將這些屬性串在 一起使用。
13. background- color 屬性，用來設定元素的背景顏色， 其預設值為“ transparent”， 不設定任何顏色情況下是透明色，
14. background- image 屬性，用來設定元素的背景圖片， 預設值為“ none”，< url> 是指背景圖片的地址， 這個地址可以是相對地址， 也可以是絕對地址。
15. background- repeat 屬性，用來設定元素背景圖片在元素的盒模型中的鋪放格式， 其預設為“ repeat”， 也就是背景圖片沿元素的X軸和Y軸同時平鋪，“ repeat- x”表示的是元素背景圖片沿元素 的X軸平鋪， Y軸不進行任何鋪 放；“ repeat- Y” 剛好相反， 元素背景圖片沿元素的Y軸平鋪， X軸不進行任何鋪 放；“ no- repeat”和 預設值“ repeat” 相反， 表示背景圖片不做任何鋪 放。
16. background- attachment 屬性，用來設定元素背景圖片是否固定或者隨著頁面的其餘部分滾動， 其預設值為“ scroll”， 表示背景圖片會隨著瀏覽器滾動條一起滾動， 而取值為“ fixed” 時， 背景圖片 固定不動。 background- attachment 取值為“ fixed” 時， 一般運用在html或 body標籤 上， 使用在其他標籤上不能達到固定效果。
17. background- position 屬性，用來設定元素背景圖片的位置， 其預設值為（ 0，0）||（ 0%， 0%）||（ lefttop）， 其值可以是具體的百分數或數值設定（ 可以 是 負值）， 也可以使用關鍵詞 left、 center、 top、 right、 top、 bottom 配合設定， 三，*與背景相關的新增屬關於 background屬性的用法相信很多讀者都已經熟悉了。 在CSS3中， background 屬性 依然保持以前的用法， 只是追加了一些與背景相關的屬性。 1· background- origin： 指定繪製背景圖片的起點。 2· background- clip： 指定背景圖片的顯示範圍。 3· background- size： 指定背景圖片的尺寸大小，在CSS3中， 可以使用background- size屬性來指定背景圖片的尺寸， 可以控制背景圖片在水平和垂直兩個方向的縮放， 也可以控制圖片拉伸覆蓋 背景區域的方式， 甚至還可以擷取背景圖片。 背景圖片能夠自適應元素盒子的大小， 實現與模組大小完全適應的背景圖片， 避免了因區塊尺寸不同而需要設計不同的背景圖片。 background- size共有五種屬性值，每一種屬性值的作用如下： ·auto： 預設值。 將保持背景片的原始高度和寬度。 ·： 取具體的整數值（ 例如 px 值）， 將改變背景圖片的大小。 ·： 取值為百分值， 可以是 0% ～ 100%。 此時， 同樣改變背景圖片的大小， 但 此值是相對於元素的寬度來進行計算， 並不是根據背景圖片的寬度來進行計算。 ·cover： 將背景圖片放大， 以適合鋪滿整個容器。 但這種方法會致使背景圖片失真。 ·contain： 保持背景影象本身的寬和高比例， 將背景影象縮放到寬度或高度正好適應所定義背景容器的區域。 當 background- size 取值為固定數值（ length） 和百分比值（ percentage） 時可以 設定兩個值， 也可以設定一個值。 只取一個值時， 指定了背景圖片的寬度， 第二個值相當於auto， 也就是指定了高度。 在這種情況下， auto值設定 之後能夠讓背景圖片的高度自動地按照比例縮放。 4· background- break： 指定內聯元素的背景圖片進行平鋪時的迴圈方式。 。。。。。。 四， CSS3 文字 在 Web 頁面或者Web應用程式中設定文字樣式是CSS最基本的要求， 早期的CSS文字功能就是給Web頁面設定文字的 字型、 字號、 顏色、 樣式、 粗細、 間距 等。 隨著 CSS3 的 出現， 文字 功能 不僅僅 侷限於 這些 基本 的 運用， 它 給 文字 功能 新增 了 一些 高階的 屬性 設定， 如 文字 陰影 屬性 text- shadow、 文字 自動 換行 屬性 word- break、 長 單詞 與 URL 地址 自動 換行 屬性 word- wrap 和 文字 溢位 屬性 text- overflow 等， 在 CSS文字功能上主要分為三大類： 字型、 顏色 和 文字， text- shadow 屬性 一共 包含 4 個 屬性 引數， 每個 屬性 引數 都 具有 自己的 作用。 ·color： 陰影 顏色， 定義繪製陰影時所使用的顏色， 這個引數可以放在第一 也可以放在最後， 是一 個可選引數， 如果沒有顯式設定陰影顏色， 會使用文字的顏色作為陰影顏色。 陰影顏色可以是顏色 關鍵詞、 十六進位制 顏色、 RGB 顏色、 RGBA 透明 色 等。 ·x- offset： X 軸 位移， 用來 指定 陰影 水平 位移 量， 其 值 可以 是 正 負值， 如果 為 正值， 陰影 在 物件 的 右邊， 反之 陰影 在 物件 的 左邊。 ·y- offset： Y 軸 位移， 用來 指定 陰影 垂直 方向 偏移量， 其 值 可以 是 正 負值， 如果 為 正值， 陰影 在 物件 的 底部， 反之 陰影 在 物件 的 頂部。 ·blur- radius： 陰影 模糊 半徑， 可選 引數， 用來 設定 陰影 的 模糊 半徑， 代表 陰影 向外 模糊 的 模糊 範圍。 這個 值 越大， 陰影 向外 模糊 的 範圍 越大， 陰影 的 邊緣 就 越 模糊。 不過 這個 值 只能 是 正值， 其 值 為 0 時， 表示陰影 不具 有 模糊 效果。 可以 使用 text- shadow 屬性來給文字指定多個陰影， 並且針對每個陰影使用不同顏色。 指定多個陰影時使用逗號將多個陰影進行分隔。 text- shadow 多陰影效果按照給定的順序應用， 因此前面的 陰影有可能會覆蓋後面的， 但是它們永遠會覆蓋文字本身。
18. CSS3 溢位文字屬性平時在網頁製作中一定碰到過內容溢位的問題， 如文章列表標題很長， 而其寬度又受到限制， 此時超出寬度的內容就會以省略 標記（…） 顯示。 以前實現這樣的效果都是由後臺 程式擷取一定的字元數在前臺輸出， 另外一種方法就是使用 JavaScript 擷取 一定 的 字元 數 實現。 可是 這 兩種 方法 都有 其 不足之處， 如 中文 和 英文 的 計算 字元 寬度 的 問題， 這個 值 不好 計算， 所以 造成 擷取 字元 數 不好 控制， 從而其通用性也差。 CSS3 新增 了 text- overflow 屬性， 使得 這個 問題 迎刃而解。 text- overflow 屬性 引數 比較 簡單， 只有兩個屬性值。 ·clip： 不顯 示 省略 標記（…）， 只是 簡單 的 裁 切。 ·ellipsis： 文字 溢位 時 顯示 省略 標記（…）， 省略 標記 插入 的 位置 是最 後 一個 字元。 強制 文字 在 一行 顯示（ white- space: nowrap） 和 溢位 內容 隱藏（ overflow: hidden）， 並且 需要 定義 容器 的 寬度。 text-overflow: ellipsis; overflow: hidden; 有省略號，需要這兩個屬性配合才有效， text-overflow: clip; overflow: hidden; 直接隱藏，需要這兩個屬性配合才有效，
19. CSS3 文字 換行 在 CSS3 中， 使用 word- wrap：break- word屬性 實現 長 單詞 與 URL 地址 的 自動 換行。 ·break- all： 可以 強行 截斷 英文 單詞， 達到 詞 內 換行 效果。 ·keep- all： 不允許字斷開。 如果是中文把前後標點符號內的一個漢字短語整個換行， 英文單詞整個換行； 如果出現某個英文字元長度超過容器邊界， 後面的部分將撐破容器； 如果邊框為固定屬性， 則後面部分無法顯示。 white- space 屬性主要用來宣告建立佈局過程中如何處理元素中的空白符。 white- space 屬性 取值 簡單 說明 如下： ·normal： 預設值。 空白處會被瀏覽器忽略。 可以通過這個值恢復到屬性的預設值。 ·pre： 文字空白處會被瀏覽器扣留， 其行為方式類似於 HTML 中的< pre> 標籤 效果。 ·nowrap： 文字不會換行， 文字會在同一行上， 直到碰到換行標籤< br />為止。 ·pre- line： 合併空白符序列， 但保留換行符， 此屬性不支援 IE 7. 0-、 Firefox 3. 0- 和 Opera 9. 2- 以下版本瀏覽器。 ·pre- wrap： 保留空白符序列， 但是正常進行換行， 此屬性值不支援 IE 7. 0 和 Firefox 3. 0 以下 版本瀏覽器。 ·inherit： 繼承父元素的 white- space 屬性值， 此屬性值在所有的 IE瀏覽器都不支援。 。。。。。。 五，　 CSS3 顏色特性 “佛 靠 金 裝， 人 靠 衣裝”， 網頁也是如此。 隨著網際網路的 迅速發展， 一個網頁給人們留下的第一印象， 既不是它的內容， 也不是它的設計， 而是整體顏色。 為了能夠達到 人們的需求， Web設計師除了需要掌握網站製作的技術之外， 還必須能夠很好地應用 Web 顏色。 換句話說， 網站顏色的使用好壞， 直接影響網站的生存力。 網頁色彩的表現原理 我們知道有256種Web安全顏色， 其實這256種顏色 是指8位顏色的表現能力， 隨著科技的發展， 現在顏色不侷限於8位， 16位色彩的總數是65536 色， 也就是2的16次方， 而新增了24位元色彩， 也就是2的24次方， 即16777216種顏色。 32位色就是2的32次方的髮色數， 即16777216種顏色， 不過它增加了256階顏色的灰度。 32位色和16位色肉眼分辨不出來嗎？ 如果用兩臺品牌型號都一樣 的顯示器， 分別調不同的顏色， 就能看出區別。 而在Web頁面的設計中， 顏色主要運用16 進位制數值的表示方法， 為了用HTML表現RGB顏色， 使用十六進位制數 0 ～ 255， 改為十六進位制就是 00 ～ FF， 用RGB的順序羅列就成為HTML顏色編碼。 例如， 在 HTML 編碼中“ 000000” 就是指紅色（ R）、 綠色（ G） 和藍色（ B） 都沒有， 就是0狀態， 也就是黑色。 相反“ FFFFFF” 就是就是 紅色（ R）、 綠色（ G） 和藍色（ B）都是 255， 也就是白色。 顯示器是由 一個個畫素構成， 利用電子束來表現色彩。 畫素把光的三原色： 紅色（ R）、 綠色（ G）、 藍色（ B） 組合成的色彩 按照科學原理表現出來。 一 畫素包含 8 位元色彩的資訊量， 有 從 0 ～ 255 的256個單元， 其中 0 是 完全 無光 狀態， 255 是最 亮 狀態。
20. RGB色彩模式，RGB色彩模式是光的三原色 紅、 綠、 藍 混合產生的。 Web頁面中使用的圖片在大多數是在RGB色彩模式中製作的。 RGB色彩是顏色相加混合產生的， 這樣的混合稱為 加色混合。 加色混合中， 補色是指相關的兩個顏色混合時， 成為白色的情況。
21. CMYK色彩模式，CMYK色彩模式是指顏料的三原色 青色、 洋紅、 黃色 加上 黑色， 這四種顏色減色混合表現出的色彩是主要用於出版印刷時製作影象的一種模式。 減色混合是指是指顏色混合後出現 的色彩比原來的顏色暗淡， 這樣與補色相關的兩種顏色混合就會出現彩色的情況。
22. 索引色彩模式，索引色彩模式是已經被限定在256種顏色以內的模式， 主要用於Web頁面安全色彩和製作透明 GIF 圖片。 在 Photoshop 中製作透明GIF圖片時， 一定要使用索引色彩模式。
23. 灰度模式，灰度模式是無色彩模式， 在製作黑白圖片時使用， 主要用於處理 黑、白、灰色 圖片。
24. 雙色調模式，雙色調模式是在黑白圖片中加入顏色， 使色調更加豐富的模式。 RGB、 CMYK 等顏色模式都不可以直接轉換為雙色調模式， 必須將色彩模式先轉換為灰度模式後， 才能夠轉換為雙色調 模式。 用雙色調模式可以用很小的空間製作出漂亮的圖片。
25. 點陣圖模式，點陣圖模式是 用白色和黑色共同處理圖片的模式。 與雙色調一樣， 除雙色調模式和灰度模式外， 其他色彩模式都需要轉換為灰度模式後， 再轉換為點陣圖模式。 點陣圖模式可以選定5種圖片 處理 方法： 1） 50% 閾值， 是在 256 種 顏色 中， 當 顏色 值 大於 129 就 處理 為 白色， 反之則處理為黑色。 2） 圖案仿色， 是按一定的模式處理圖片。 3） 擴散仿色為最常用的選項， 是按黑色和白色的陰影使其分佈。 4） 半調網屏與自定圖案， 是利用盲點的各種形態和密度與使用者自己設定樣式的處理方式。 CSS3 顏色模式在 CSS2. 的基礎 CSS3上 新增了 RGBA、 HSL 和 HSLA，
26. RGBA 在 RGB 基礎上 增加 了控制 alpha 透明度的引數， 其中 RGB 顏色 模式（ 也稱 為 三原色） 是工業界 的 一種 顏色標準， 通過對 紅（ R）、 綠（ G）、 藍（ B） 三個 顏色 通道 的 變化 以及 它們 相互 之間 的 疊加 得到 各種 顏色，RGB幾乎包括人類視力所能感知的所有顏色， 是目前運用最廣的顏色系統之一。 而RGBA 僅在 RGB 的 基礎上 增加 了 alpha 通道， 用來 設定 顏色 的 透明度。 RGBA 的 屬性 引數 很 簡單， 分別 代表 紅綠 藍 以及 透明度 的 值。 ·R： 紅色 值， 其 取值 可以 是 正 整數 或者 百 分值。 ·G： 綠色 值， 其 取值 可以 是 正 整數 或者 百 分值。 ·B： 藍色 值， 其 取值 可以 是 正 整數 或者 百 分值。 ·A： alpha 透明 值， 其 取值 在 0 ～ 1 範圍 之間。 這幾個引數值都不可以取負值。
27. HSL 顏色 模式 HSL 和 RGB 一樣， 同 屬於 工業界 的 一種 顏色 標準， 通過 對 色調（ H）、 飽和度（ S）、 亮度（ L） 三個 顏色 通道 的 變化 以及 它們 相互 之間 的 疊加 得到 各式各樣 的 顏色 的。 HSL 標準 幾乎 包括 人類 視力 所能 感知 的 所有 顏色， 是 目前 運用 最 廣 的 顏色 系統 之一。 使用 HSL 模型 為 影象 中 每一個 畫素 的 HSL 分量 分配 一個 0 ～ 255 範圍內 的 強度 值。 HSL 影象 只用 三種 通道 按照 不同 的 比例 混合， 在 螢幕 上 呈現 16777216 種 顏色。 前面 也 說過， 色調（ H） 是在 色 盤 上 的 顏色（ 如圖 6- 4 所示）， 顏色 的 選擇 是 使用 飽和度（ S）， 0 度 是 紅色， 120 度 為 綠色， 240 度 為 藍色。 同時 可以 使用 不同 的 亮度（ L） 來 控制 這個 顏色， 其中 0 表示 的 是一 個 灰度， 不使 用 任何 的 色彩， 而 100% 是指 在 充分 使用 一個 顏色。 ·H： 色調（ Hue）。 取整 數值（< length>）， 可以 為 任意 整數， 其中 0（ 或 360 或- 360） 表示 紅色， 60 表示 黃色， 120 表示 綠色， 180 表示 青色， 240 表示 藍色， 300 表示 洋紅。 當 它們 的 值 大於 360 時， 實際 的 值 等於 該 值 除 360 之後 的 餘數。 例如， 如果 色調 的 值 是 480， 則 實際 的 顏色 值 為 480 除以 360 之後 得到 的 餘數 120。 ·S： 飽和度（ Saturation）。就是顏色的深淺度和鮮豔程式， 取百分數（< percentage>）， 可以取值 0 ～ 100%之間的任意值， 其中0表示灰度（ 沒有 該 顏色）， 100%表示飽和度最高（ 該 顏色 最 鮮豔）。 ·L： 亮度（ Lightness）。 取值和飽和度（ S） 一樣， 可以 取值 0 ～ 100% 之間的任意值， 其中0最暗（ 黑色）， 100% 最亮（ 白色）。
28. HSLA 顏色模式 HSLA 是 HSL 的 擴充套件 模式， 在 HSL 的 基礎上 增加 一個 透明 通道 alpha 來 設定 不透明 引數。 。。。。。。 六， CSS3盒模型 CSS 有 一種基礎設計模式叫盒模型， 定義了Web頁面中的元素是如何看做盒子來解析的。 每一個盒子有不同的展示介面， 在 CSS 中 主要有以下幾種盒模型： inline、 inline- block、 block、 table、 absolute position、 float。 瀏覽器把每個元素看 一個盒模型， 每一個盒模型是由以下幾個 屬性 組合 所 決定 的： display、 position、 float、 width、 height、 margin、 padding 和 border 等， 不同 型別 的 盒 模型 會 產生 不同 的 佈局。 什麼是盒模型CSS 中 每一個 元素 都是 一個 盒 模型， 包括 HTML 和 body 標籤 元素。 在平時設計中， 大家對 content、 padding、 margin、 background 和 border 來說一定不會陌生了， 因為 盒模型都具備這些屬性。 其中 width、 height、 border、 background、 padding 和 margin 之間的層次關係和相互影響， 可以 看出 padding、 content、 background- image、 background- color， 它們 四 者 構成 了 Z 軸（ 垂直 螢幕 的 座標） 多重 層疊 關係。 但是 border 與 margin、 padding 三 者 之間 應該 是 平 面上 的 並 級 關係， 並不能 構成 Z 軸 的 層疊 關係。 在 CSS 中 盒 模型 被 分為 兩種， 第 一種 是 W3C 的 標準 模型， 另一種 是 IE 的 傳統 模型， 它們 相同之處 都是 對 元素 計算尺 寸 的 模型， 具體 說 就是 對 元素 的 width、 height、 padding 和 border 以及 元素 實際 尺寸 的 計算 關係， 不同 之處 是 兩者 的 計算 方法 不一致。 1） W3C 的 標準 盒 模型。 外 盒尺 寸 計算（ 元素 空間 尺寸） element 空間 高度 ＝ 內容 高度 ＋ 內 距 ＋ 邊框 ＋ 外 距 element 空間 寬度 ＝ 內容 寬度 ＋ 內 距 ＋ 邊框 ＋ 外 距 內 盒尺 寸 計算（ 元素 大小） element 高度 ＝ 內容 高度 ＋ 內 距 ＋ 邊框 （height 為 內容 高度） element 寬度 ＝ 內容 寬度 ＋ 內 距 ＋ 邊框 （width 為 內容 寬度） 2） IE 傳統 下 盒 模型（ IE 6 以下， 不 包含 IE 6 版本 或 QuirksMode 下 IE 5. 5+）。 外 盒尺 寸 計算（ 元素 空間 尺寸） element 空間 高度＝ 內容 高度 ＋ 外 距 （height 包含 了 元素 內容 寬度、 邊框、 內 距） element 寬 間 寬度 ＝ 內容 寬度 ＋ 外 距 （width 包含 了 元素 內容 寬度、 邊框、 內 距） 內 盒尺 寸 計算（ 元素 大小） element 高度 ＝ 內容 高度（ height 包含 了 元素 內容 寬度、 邊框、 內 距） element 寬度 ＝ 內容 寬度（ width 包含 了 元素 內容 寬度、 邊框、 內 距） 為了 解決 這種 問題， CSS3 增添 了 一個 盒 模型 屬性 box- sizing， 能夠 事先 定義 盒 模型 的 尺寸 解析 方式， box- sizing 的 屬性 值 主要 有 以下 三個： 1· content- box： 預設值， 讓 元素 維持 W3C 的 標準 盒 模型。 元素 的 寬度 和 高度（ width/ height） 等於 元素 邊框 寬度（ border） 加上 元素 內 距（ padding） 加上 元素 內容 寬度 或 高度（ content width/ height）， 也就是 element width/ height= border+ padding+ content width/ height。 2· border- box： 此 值 會 重新 定義 CSS2. 1 中 盒 模型 組成 的 模式， 讓 元素 維持 IE 傳統 的 盒 模型（ IE 6 以下 版本 和 IE6 ～ 7 怪異 模式）。 元素 的 寬度 或 高度 等於 元素 內容 的 寬度 或 高度。 從 盒 模型 介紹 可知， 這裡 的 內容 寬度 或 高度 包含 了 元素 的 border、 padding、 內容 的 寬度 或 高度（ 此處 的 內容 寬度 或 高度 ＝ 盒子 的 寬度 或 高度- 邊框- 內 距）。 3· inherit：此 值 使 元素 繼承 父 元素 的 盒 模型 模式。 box- sizing 屬性 主要 用來 控制 元素 的 盒 模型 的 解析 模式， 其 主要 目的 是 控制 元素 的 總 寬度。 在 W3C 規範 中， 元素 的 box- sizing 預設 屬性 值 是 content- box 值， 如果不 顯 式 重置 box- sizing 屬性 值 為 border- box， 才能 明確 對 元素 設定 一個 總 寬度。 在這 種 情況 之下 會使 頁面 佈局 更加 方便。 。。。。。。 七，　 CSS3內容溢位屬性在CSS中的每一個元素都視為一個盒子， 這個盒子就是一個容器。 容器就有大小之分， 如果在樣式中指定盒子的寬度與高度， 可能某些內容在盒子中就會容不下， 此時 就可以 使用 overflow 屬性 來 指定 如何 顯示 盒中 容納 不下 的 內容。 overflow 屬性 是 CSS2. 1 規範 中的 特性， 而在 CSS3 中 增加 了 overflow- x 和 overflow- y 屬性。 overflow- x主要是用來定義對水平方向內容溢位的剪下， 而 overflow- y主要用來定義對垂直方向內容溢位的剪下。 和 overflow屬性引數一樣， overflow- x和overflow- y屬性值取不同的值所起的作用 不一樣。 ·visible： 預設值。 表示不剪下容器中的任何內容、 不新增滾動條， 元素將被剪下為包含物件的視窗大小， 而且clip屬性設定將失效。 ·auto： 在需要時剪下內容並新增滾動條。 也就是說也就是說當內容超過容器的寬度或者高度時， 溢位的內容將會隱藏在容器中， 並且會新增滾動條， 使用者可以拖動滾動條檢視隱藏在容器中的內容。 ·hidden： 內容溢位容器時， 所有內容都將隱藏， 而且不顯示滾動條。 ·scroll： 不管內容有沒有溢位容器， overflow- x 都會顯示橫向的滾動條， 而overflow- y 會顯示縱向的滾動條。 ·no- display： 當內容溢位容器時不顯示元素， 此時類似於元素添加了 display: none 宣告 一樣。 ·no- content： 當內容溢位容器時不顯示內容， 此時類似於添加了 visibility: hidden 宣告 一樣。 。。。。。。 八，　 CSS3 自由縮放屬性為了增強使用者體驗， CSS3增加了很多新的屬性， 其中 resize 就是 一個重要的屬性， 也是一個非常實用的屬性， 它允許使用者通過拖動的方式來修改元素的尺寸來改變元素的 大小。 到目前為止， 可以使用 overflow屬性的任何容器元素。 在此之前， Web設計師為了要實現這樣的UI 效果， 需要使用大量的指令碼程式碼才能實現， 這樣費時費力， 效率極低。 resize 屬性主要是用來改變元素尺寸大小的， 其主要目的是增強使用者體驗。 使用方法極其的簡單。 在 CSS3 中 resize 屬性 指 定的 值 分為 以下 幾種： ·none： 使用者不能拖動元素修改尺寸大小。 ·both： 使用者可以拖動元素， 同時修改元素的寬度和高度。 ·horizontal： 使用者可以拖動元素， 僅可以修改元素的寬度， 但不能修改元素的高度。 ·vertical： 使用者可以拖動元素， 僅可以修改元素的高度， 但不能修改元素的寬度。 ·inherit： 繼承父元素的 resize 屬性值。 。。。。。。 九，CSS3 外輪廓屬性外輪廓 outline 在頁面中呈現的效果和邊框border呈現的效果極其相似， 但和元素邊框 border完全不同， 外輪廓線不佔用網頁佈局空間， 不一定是矩形， 外輪廓是屬於一種 動態樣式， 只有元素獲取到焦點或者被啟用時呈現。 ·outline- color： 定義輪廓線的顏色， 屬性值為CSS 中定義的顏色值。 在實際應用中， 省略時此引數的預設值為黑色。 ·outline- style： 定義 輪廓線的樣式， 屬性為CSS中定義線的樣式。 在實際應用中， 省略時此引數的預設值為 none， 省略後不對該輪廓線進行任何繪製。 ·outline- width： 定義輪廓線的寬度， 屬性值可以為 一個寬度值。 在實際應用中， 省略時此引數的預設值為 medium， 表示繪製中等寬度的輪廓線。 ·outline- offset： 定義輪廓邊框的偏移位置的數值， 此值可以取負數值。 當此引數的值為正數值， 表示輪廓邊框向外偏離多少個畫素； 當此引數的值為負數值， 表示輪廓邊框向內偏移多少個畫素。 ·inherit： 元素繼承父元素的 outline效果。 輪廓和邊框的對比 outline 和 border 的 對比 outline 屬性 建立 的 外輪 廓 線外 表上 和 border 極其 相似， 但 實際 上有 明顯 的 不同。 ·border 屬於 盒 模型 的 一部分， 直接影響 元素 盒子 的 大小， 而 outline 建立 的 外 輪廓 線 是 畫 在 一個 框 的“ 上面”， 不會 影響 該 框 或 任何 其他 框 大小， 因此 outline 建立 的 輪廓 線 不會 影響 文件 流， 也不 會破 壞 網頁 佈局。 ·outline 建立的輪廓線表面上和border 一樣， 可以建立輪廓線的顏色、 線型樣式、 線型粗細大小， 但 和 border 有 一點 完全 不一樣。 outline 建立 的 外 輪廓 線 在 元素 各 邊 都 一樣， 這 和 border 不一樣， 不能 像 border 邊框 一樣， 設定 outline- top 或 outline- left 之類。 ·border 建立 的 元素 邊框 可以 單邊 設定， 而 outline 建立 的 外 輪廓 線 始終 是 閉合 的。 ·outline 建立 的 外 輪廓 線 可能 是非 矩形 的， 如果 元素 是 多 行， 外 輪廓 線 就 至少 是 能夠 包含 該 元素 所有 框 的 外 輪廓。 可 border 不一樣， 他將 使用 一個 邊框 包括 整個 元素。 ·border 僅可以設定元素的邊框， 只能向外擴充套件， 而outline建立的外輪廓線， 可以通過 outline- offset 的值， 向元素外部（ outline- offset 值 為 正值） 或向元素內部（ outline- offset 值 為 負值） 建立封閉的輪廓。 。。。。。。 十，　 CSS3伸縮佈局盒模型 早期的佈局主要依賴於表格， 從 CSS2. 1中有關於佈局的機制有所改變， 但還是並不多。 開發者通常不願意使用絕對定位， 因為太不靈活； 浮動 定位 常用於頁面的 佈局， 但 對於全頁多列布局來說， 它總是存在一些小毛病， 功能上也有很多限制。 CSS3 中引入了許多的佈局機制， 使構建一個多列布局變得更加輕鬆， 同時， CSS2. 1 規則是比較難實現的一些 複雜佈局表現， 如今也變得更加容易。
29. 彈性盒模型 　Flexbox模型基礎知識CSS3 引入 一種新的佈局模式—— Flexbox 佈局， 即伸縮佈局盒（ Flexible Box）模型， 用來提供 一個更加有效的方式制定、 調整和分佈一個容器裡的專案佈局， 即使它們的大小是未知或者動態的， 這裡簡稱 Flex。 CSS 中的佈局模式 談到佈局， CSS2. 1 中 定義 了四種佈局模式，由一個盒與其 弟、 祖先盒的關係決定其尺寸與位置的演算法。 ·塊佈局： 呈現文件的佈局模式。 ·行內佈局： 呈現文字的佈局模式。 ·表格佈局： 用格子呈現2D資料的佈局模式。 ·定位佈局： 能夠直接地定位元素的佈局模式， 定位元素基本與其他元素沒有任何關係。 CSS3 引入的佈局模式 Flexbox 佈局， 主要思想是讓容器有能力讓其子專案能夠改變其寬度、 高度（ 甚至 順序）， 以最佳方式填充可用空間（ 主要是為了適應所有型別的顯示裝置和螢幕大小）。 Flex容器會使子專案（ 伸縮 專案）擴充套件來填滿可用空間， 或縮小它們以防止溢位容器。 最重要的是， Flexbox佈局方向不可預知， 不像常規的佈局（ 塊就是從上到下， 內聯就 從左到右）， 而那些常規的適合頁面佈局， 但對於支援大型或者複雜的應用程式（ 特別是涉及取向改變、縮放 和收縮等） 就缺乏靈活性。 ：Flexbox 模型的功能 Flexbox 佈局對於設計比較複雜的頁面非常有用。 可以輕鬆地實現螢幕和瀏覽器視窗大小發生變化時保持元素的相對位置和大小不變。 同時減少了依賴於 浮動 佈局 實現 元素 位置 的 定義 以及 重置 元素的大小。 Flexbox 佈局在定義伸縮專案大小時 伸縮容器會預留一些可用空間， 可以調節伸縮專案的相對大小和位置。 例如， 可以確保伸縮容器中的多餘空間平均分配多個伸縮專案。 當然， 如果 伸縮容器沒有足夠大的空間放置伸縮專案時， 瀏覽器會根據 一定的比例減少伸縮專案的大小， 使其不溢位伸縮容器。 綜合而言， Flexbox 佈局功能主要具有以下幾點： 1· 螢幕和瀏覽器視窗大小發生改變也可以靈活調整佈局。 2· 指定伸縮專案沿著主軸或側軸按比例分配額外空間（ 伸縮 容器 額外 空間）， 從而調整伸縮專案的大小。 3· 指定伸縮專案沿著主軸或側軸將伸縮容器額外空間， 分配到伸縮專案之前、 之後或之間。 4· 指定如何將垂直於元素佈局軸的額外空間分佈到該元素的周圍。 5· 控制元素在頁面上的佈局方向。 6· 按照不同於文件物件模型（ DOM） 所指定排序方式對螢幕上的元素重新排序。 也就是說可以在瀏覽器渲染中不按照文件流先後順序重排伸縮專案順序。 ：Flexbox 模型 中的術語 Flexbox 模型中的術語和 CSS3 其他 屬性不一樣， Flexbox 並不是一個屬性， 而是一個模組， 包括多個 CSS3屬性， 涉及很多東西， 包括整個組屬性。 雖然現在對Flexbox有 一定的瞭解， 如果想 更好地使用 Flexbox， 新的術語和概念可能是一個障礙， 所以首先了解基本概念。

30. 主軸和側軸在 Flexbox 模型中與佈局計算偏向使用書寫模式方向的塊佈局與行內佈局不同， 伸縮 佈局 偏向 使用 伸縮 流的 方向。一個 row伸縮容器中各種方向與大小術語 
    

·主軸、主軸方向： 使用者代理沿著一個伸縮容的主軸配置伸縮專案， 主軸是主軸方向的延伸。 伸縮容器的主軸， 伸縮專案主要沿著這條軸進行佈局。 小心， 它不一定是水平的， 這主要取決於 justify- content 屬性。 如果 其 取值 為 column， 主軸的方向為縱向的。 ·主軸起點、主軸終點： 伸縮專案的配置從容器的主軸起點邊開始， 往主軸終點邊結束。 也就是說， 伸縮專案放置在伸縮容器內從主軸起點（ main- start） 向主軸終點（ main- end）方向。 ·主軸長度、主軸長度屬性： 伸縮專案的在主軸方向的寬度或高度就是專案的主軸長度， 伸縮專案的主軸長度屬性是 width 或 height 屬性， 由哪一個對著主軸方向決定。 ·側軸、側軸方向： 與主軸垂直的軸稱做側軸， 側軸是側軸方向的延伸。 主要取決於主軸方向。 ·側軸起點、側軸終點： 填滿專案的伸縮行的配置配置從容器的側軸起點邊開始， 往側軸終點邊結束。 ·側軸長度、 側軸長度屬性： 伸縮專案的在側軸方向的寬度或高度就是專案的側軸長度， 伸縮專案的側軸長度屬性是 width 或 height 屬性， 由 一個 對著 側 軸 方向 決定。 31. 伸縮容器和伸縮專案通過 display 屬性顯式地給 一個元素 設定為 flex或者inline- flex， 這個容器就是一個伸縮容器。 伸縮容器會為其內容創立新的伸縮 格式化上下文， 其中設定為 flex 的容器 被 渲染為 一個塊級元素， 而設定 為inline- flex 的容器則渲染 為 一個行內元素。 若 元素 display 的 指定 值 是 inline- flex 且元素 是一 個浮動或絕對定位元素， 則 display 的計算值是flex。 一個伸縮容器的內容具有零個以上的伸縮專案—— 伸縮容器的每個子元素（ 除了 需要 盒 修復 的 元素 之外） 都會成為 一個伸縮專案， 且使用者代理會將任何直接在伸縮容器裡的連續文字塊包起來 成為 匿名伸縮專案。 32. 伸縮容器的屬性Flexbox伸縮佈局中伸縮容器和伸縮專案是伸縮佈局模組中的重要部分， 其中每一部分都具有各自的屬性。 伸縮容器的屬性包括以下幾個： 1） 伸縮流方向。 是指伸縮容器的主軸方向， 其決定了伸縮專案放置在伸縮容器的方向。 伸縮流方向主要通過flex- direction屬性來設定， 其預設值為row。 伸縮流方向和書寫模式有關係， 換句話說， 伸縮專案根據書寫模式的方向佈局。 2） 伸縮行換行。 伸縮專案在伸縮容器中有時候也會溢位伸縮容器。 與傳統的盒模型一樣， CSS允許使用overflow屬性來處理溢位內容的顯示方式。 在伸縮容器中有一個伸縮換行屬性， 主要用來 設定伸縮容器的伸縮專案是單行顯示還是多行顯示， 以及決定側軸的方向。 使用此屬性來啟用溢位的伸縮容器的伸縮專案自動換行到下一行以及控制流動方向。 在伸縮容器屬性中， 主要通過 flex- wrap 屬性來設定伸縮專案是否換行， 預設值為 nowrap。 3） 伸縮方向與換行。 是 伸縮 流 方向 與 伸縮 換行 的 結 合物， 換句話說， 伸縮 方向 與 換行 屬性 flex- flow 同時 設定 了 伸縮 流 方向 flex- direction 和 伸縮 換行 flex- wrap 兩個 屬性， 簡而言之 是 這 兩個 屬性 的 縮寫， 這 兩個 屬性 決定了 伸縮 容器 的 主軸 與 側 軸。 4） 主軸對齊。 用來設定伸縮容器當前行伸縮專案在主軸方向的對齊方式， 指定 如何 在 伸縮 專案 之間 分佈 伸縮 容器 額外 空間。 當 一 行上 的 所 伸縮 專案 不能 伸縮 或 可伸縮 但 已達 到 最大 長度 時， 這一 屬性 才會 對 伸縮 容器 額外 空間 進行 分配。 當 伸縮 專案 溢位 某 一行 時， 這一 屬性 也會 在 專案 的 對齊 上 施加 一些 控制。 5） 側軸對齊。 伸縮 專案 可以 在 伸縮 容器 當前 行的 側 軸上 進行 對齊， 這類 似於 主軸 對齊 方式， 只是 另一個 方向。 也就是說 側 軸 對齊 主要 用來 指定 伸縮 專案 在 伸縮 容器 中 如何 放置 和 對齊 的 方式。 換句話說， 用來 定義 伸縮 專案 在 伸縮 容器 的 當前 行的 側 軸上 對齊 方式。 6） 堆疊伸縮行。 用來 定義 伸縮 容器 中 伸縮 專案 行在 側 軸 的 對齊 方式， 類似於 側 軸 對齊， 只不過 這是 用來 控制 伸縮 專案 行在 佈局 軸 的 堆放 方式。 33. 伸縮專案的屬性一個伸縮專案是一 個伸縮容器的子元素。 伸縮容器中的文字也被視為一個 伸縮專案。 伸縮 專案 中 內容 與 普通 流 一樣。 比如說， 當 一個 伸縮 專案 被 設定 為 浮動， 依然 可以 在這 個 伸縮 專案 中 放置 一個 浮動 元素。 伸縮 專案 都有 一個 主軸 長度 和 一個 側 軸 長度。 主軸 長度 是 伸縮 專案 在 主 軸上 的 尺寸， 側 軸 長度 是 伸縮 專案 在 側 軸上 的 尺寸。 或者說，一個 伸縮 專案 的 寬度 或 高 取決於 伸縮 容器 的 軸， 可能 就是 它的 主軸 長度 或側 軸 長度。 下面 的 幾個 屬性 可以 調整 伸縮 專案 的 行為： 1） 顯示順序。 伸縮 容器 中的 伸縮 專案 預設 顯示 順序 是 遵循 文件 在 源 碼 中的 出現 的 先後 順序（ HTML 文件 的 DOM 結構 中的 先後 順序）。 可以 通過 伸縮 專案 的 顯示 順序 修改 伸縮 專案 在 頁面 中 顯示 順序， 也可以 通過 這個 屬性 對 伸縮 專案 進行 排序 組合。 2） 側軸對齊。 包括 兩種， 一種 是 align- items 屬性， 可以 用來 設定 伸縮 容器 中 包括 匿名 伸縮 專案 的 所有 專案 的 對齊 方式； 另一種 是 align- self 屬性， 主要 用來 在 單獨 的 伸縮 項 目上 覆 寫 預設 的 對齊 方式。 對於 匿名 伸縮 專案， align- self 的 值 永遠 與其 關聯 的 伸縮 容器 的 align- items 的 值 相同。 3） 伸縮性。 定義 伸縮 專案 可改變 它們 的 寬度 或 高度 填補 可用 的 空間。 可以 將 伸縮 容器 的 額外 空間 分 發給 其 伸縮 專案（ 與 伸縮 項 目的 正 彈性 成正比） 或將 它們 縮小 以防 止 伸縮 專案 溢位（ 與 伸縮 項 目的 負 彈性 成正比）。 34. 伸縮行伸縮專案 沿著 伸縮 容器 內 的 一個 伸縮 行 定位。 伸縮 容器 可以 是 單行 的， 也可以 是 多 行的。 其 主 要由 flex- warp 屬性 決定。 單行 的 伸縮 容器 會 將其 所有 子 元素 在 單獨 的 一行 上進 行 佈局， 這種 情況 之下 有可能 導致 內容 溢位 伸縮 容器； 多 行的 伸縮 視窗 會 將其 伸縮 專案 配置 在 多個 伸縮 行上， 這類 似於 文字 的 排列。 當 文字 過寬 導致 一行 無法 容納 時， 內容 會 斷開 並 移至 新的 一行。 當 使用者 代理 建立 新的 伸縮 行 時， 這些 伸縮 行會 根據 flex- wrap 屬性 沿著 側 軸 進行 堆疊。 除非 伸縮 容器 本身 是 空的， 每一個 伸縮 行 至少 包含 一個 伸縮 專案。 ：Flexbox 模型規範狀態 Flexbox佈局的語法規範經過幾年發生了很大的變化，也給 Flexbox 的使用帶來一定的侷限性， 因為語法規範版本眾多， 瀏覽器支援不一致， 致使 Flexbox 佈局使用不多。 Flexbox 語法規範主要經歷 了以下階段。 1） 2009 年 07 月 工作 草案（ display: box） 2） 2011 年 03 月 工作 草案（ display: flexbox） 3） 2011 年 11 月 工作 草案（ display: flexbox） 4） 2012 年 03 月 工作 草案（ display: flexbox） 5） 2012 年 06 月 工作 草案（ display: flex） 6） 2012 年 09 月 候選 推薦（ display: flex） 把 Flexbox 佈局 語法 規範 主要 分成 三種。 ·舊版本（ Old），2009年版本， 使用 display: box 或者display: inline- box。 ·混合版本（ Hybrid），2011年版本，使用display: flexbox 或者display: inline- flexbox。 ·最新版本（ Modern），使用display: flex或者display: inline- flex。 ：如何辨別舊Flexbox和新Flexbox ·看到“ display: box”或者“ box-{}” 屬性， 說明 是 2009 年 版本 的 Flexbox。 ·看到“ display: flexbox” 或者“ flex()”函式， 說明 是 2011 年 版本， 也稱 為 Flexbox 混合 版本。 ·看到“ display: flex” 或者“ flex-{}”屬性， 說明 是 當前 規範， 也就是 W3C 標準 規範 版本 的 Flexbox。 ：伸縮容器設定display要改變元素的模式， 需要使用display屬性， 如果在讓一個元素變成伸縮容器， 也離不開display屬性。 屬性值主要有兩種。 ·box： 設定為塊伸縮容器。 ·inline- box： 設定為內聯級伸縮容器。 ：伸縮流方向 box- orient伸縮 流 方向 box- orient 屬性 主要用來建立主軸， 從而定義了伸縮專案在伸縮容器中的流動布方向。 換句話說主要用來指定伸縮專案如何放置在伸縮容器的主軸上。 伸縮流方向 box- orient主要適用於伸縮容器。 伸縮流方向主要是用來確定伸縮專案在伸縮容器中的流動佈局方向，該屬性主要有四個屬性值， 其取值說明如下： ·horizontal： 伸縮專案在伸縮容器中從左到右在一條不平線上排列顯示。 ·vertical： 伸縮專案在伸縮容器中從上到下在一條垂直線上排列顯示。 ·inline- axis： 伸縮專案沿著內聯軸排列顯示。 ·block- axis： 伸縮專案沿著塊軸排列顯示。 伸縮流方向和文字書寫模式也有關係， 如果書寫模式是ltr， 表示排版本方向從左向右， 如果書寫模式是rtl表示排版方向從右向左排列。 伸縮流的取值為 horizontal 和 inline- axis 時， 確認伸縮專案的 伸縮流方向和書寫模式的方向關連性非常的強。 可以說書寫模式直接影響了它們的排列方向。 。。。。。。 十一，　 CSS3 漸變，漸變是兩種或多種顏色之間的平滑過渡。 35. CSS3線性漸變線上性漸變過程中， 顏色沿著一條直線過渡： 從左側到右側、 從右側到左側、 從頂部到底部、 從底部到頂部或沿任意軸。 如果使用過製作 Photoshop 等軟體， 對線性漸變並不會 陌生。 CSS3製作漸變效果， 其實和使用製作軟體中的漸變工具沒有什麼差別。 首先指定一個漸變的方向、 起始顏色、 結束顏色。 具有這三個 數就可以製作 一個最簡單、 最普通的漸變效果。 如果 製作一個複雜的多色漸變效果， 就需要在同一個漸變方向增添多個色 標。 具備這些漸變引數（ 至少三個）， 各瀏覽器就會繪製與漸變線垂直的顏色結來填充整個容器。 瀏覽器渲染出來的效果就 類似於製作軟體設計出來的漸變影象。 ：CSS3線性漸變，(linear-gradient) 1：顏色從頂部向底部漸變 簡單的方法直接使用“ to top”關鍵詞， 表示第一顏色向第二顏色漸變。 實現類似於“ to top”效果還可以使用角度值“ 0deg”、“ 360deg” 和“- 360deg”。 2：顏色從底部向頂部漸變 關鍵詞“ to bottom” 剛好 與“ to top” 相反， 從底部向頂部實現漸變效果。 也可以使用角度值“ 180deg” 和“- 180deg” 實現同等效果。 3：顏色從左向右漸變“to left”關鍵詞實現了從左向右顏色漸變， 也可以通過角度值“ 90deg” 和“ 270deg”實現。 4：顏色從右向左漸變 “to right” 正好與“ to left” 效果相反。 實現了顏色從右向左直線漸變， 也可以使用角度值“ 90deg” 和“- 270deg”。 5：從右下角向左上角線性漸變 “to top left” 實現從右下角向左角線性漸變。 6：從左下角到右上角線性漸變 “to top right” 關鍵詞實現左下角到右上角的線性漸變。 7：從右上角到左下角線性漸變 “to bottom left” 關鍵詞實現了右上角向左下角直線漸變。 8：從左上角向右下角線性漸變 “to bottom right” 關鍵詞實現了左上角向右下角直線漸變。 CSS3 製作 漸變 按鈕 Web頁面或者說Web程式應用中， 按鈕是設計中的一個重要元素， 也是設計師非常重視的一個設計元素。 設計師藉助Photoshop等軟體實現按鈕效果， 然後通過圖片的方式轉用到Web頁面中或者 Web應用程式中。 這種方法安全、 相容性較強， 實現方法也簡單， 但適應能力比較弱、 重用性、 可擴充套件性、 維護性差。 例如， 修改一個按鈕的顏色， 必須先從製作軟體中修改好， 再次切 圖， 最後替換 Web頁面中的圖片。 CSS3 的漸變出現後， Web設計師可以擺脫Photoshop的束縛， 特別是在配合CSS3的陰影、 圓角和@font- face等屬性， 可以直接脫離製圖軟體， 直接使用CSS快速 設計各種精巧、靚麗、 細膩的按鈕（ 幾乎可以和設計軟體製作出來的效果一模一樣）。 通過CSS3屬性製作的按鈕與設計軟體製作的按鈕相比， 有以下幾大優勢： ·靈活性、 可擴充套件性強： 可以通過CSS3的屬性可以直接修改按鈕的大小、 背景等效 果。 ·可以減少http請求， 提高頁面的載入效能。 ·可以應用到任何的HTML標籤元素， 如 a、 input、 button、 span 和 div 等。 ·可以支援按鈕多種狀態效果， 比如當前狀態、 懸停狀態和點選狀態。 ·完全相容不支援 CSS3 的瀏覽器， 如果不相容CSS3， 則顯示沒有漸變和陰影的普通效果。 ：CSS3徑向漸變，(radial-gradient) CSS3徑向漸變是圓形或橢圓形漸變。 顏色不再沿著一條直線軸變化， 而是從一個起點朝所有方向混合。 但相對線 漸變要比徑向漸變複雜得多。 CSS3 徑向漸變的屬性引數 CSS3的徑向漸變相對於線性漸變要複雜得多， 屬性引數也繁多複雜。 CSS3徑向變中新舊語法中的屬性引數定義如下: 1.< position>主要用來定義徑向漸變的圓心位置。 此值類似於CSS中background- position屬性， 用於確定元素漸變的中心位置。 如果這個引數省略了， 其預設值為 center。 其值主要有以下幾種： ·： 用長度值指定徑向漸變圓心的橫座標或縱座標， 可以為負值。 ·： 用百分比指定徑向漸變圓心的橫座標或縱座標， 可以為負值。 ·center： 設定中間為徑向漸變圓心的橫座標值或縱座標。 ·top： 設定頂部為徑向漸變圓心的縱標值。 ·right： 設定右邊為徑向漸變圓心的橫座標值。 ·bottom： 設定底部為徑向漸變圓心的縱標值。 ·left： 設定左邊為徑向漸圓心的橫座標值。 2.< shape> 主要用來定義徑向漸變的形狀。 其主要包括兩個值circle 和ellipse： ·circle： 如果< size> 和< length> 大小相等， 徑向漸變是一 個圓形， 也就是用來指定圓形的徑向漸變。 ·ellipse： 如果< size> 和< length> 大小不相等， 徑向漸變是一個橢圓形， 也就是用來指定橢圓形的徑向漸變。 3.< size>用來確定徑向漸變的結束形狀大小。 如果省略， 其預設值為 farthest- corner。 可以給其顯式地設定一些關鍵詞。 ·closest- side： 指定徑向漸變的半徑長度為從圓心到離圓心最近的邊。 ·closest- corner： 指定徑向漸變的半徑長度為從圓心到圓心 最近的角。 ·farthest- side： 指定徑向漸變的半徑長度為從圓心到離圓心最遠的邊。 ·farthest- corner： 指定徑向漸變的半徑長度為從圓心到離圓心最遠的角。 如果< shape>設定 為circle或者省略，< size> 可能顯式設定為< length>。 表示用長度值指定徑向漸變的橫向或縱向直徑 長度， 並根據橫向和縱向的直徑來確定徑向漸變的形狀是圓或者是橢圓， 不能為負值。 4.< color- stop> 徑向漸變線上的停止顏色， 類似於線性漸變的< color- stop>， 漸變線從中心點向右擴散。 其中0%表示漸變線的起始點， 100%表示漸變線的與漸變容器相交結束的位置， 而且其 顏色停止可以定義一個負值。 ：CSS3重複線性漸變 可以使用重複線性漸變repeating-linear-gradient 屬性代替線性漸變linear-gradient。 它們採取相同的值， 但色標在兩個方向上都無限重複。 不過使用百分比設定色標的位置沒有多大的意義， 但 使用畫素和其他的單位重複線性漸變可以建立一些很酷的效果， ：CSS3重複徑向漸變 以同樣的方式， 使用相關的屬性建立重複的徑向漸變， 其語法和radial- gradient 類似， 只是以一個徑向漸變為基礎進行重複漸變， 在CSS3中漸變特性主要包括 線性漸變（ linear- gradient）、 徑向漸變（ radial- gradient）、 重複線性漸變（ repeating- linear- gradient） 重複徑向漸變（ repeating- radial- gradient） 四種。其中線性漸變和重複線性漸變語法相同， 而徑向漸變和重複徑向漸變的語法相同。 從本質上說， 漸變就是背景屬性中的background-image， 瀏覽器直接將漸變生成圖片， 可以直接使用 CSS 背景屬性來控制它們。 。。。。。。 十二，CSS3變形 CSS2. 1 中的頁面都是靜態的， 網頁設計師也習慣把它作為頁面效果的設計工具。 多年來， Web設計師依賴於圖片、 Flash或 JavaScript才能完成修改頁面的外觀。 CSS3將改變設計師這種思維，藉助 CSS3可以輕鬆 傾斜、 縮放、 移動 以及翻轉元素。 2012年9月， W3C組織釋出了CSS3變形工作草案。 允許CSS把元素轉變為2D或3D空間， 這個草案包括了CSS32D變形和CSS33D變形。 CSS3變形是一 些效果的集合， 比如 平移、 旋轉、 縮放 和 傾斜效果， 每個效果都稱為變形函式（ Transform Function）， 它們可以操控元素髮生旋轉、 縮放、 平移 等 變化。 這些效果在之前都需要依賴圖片、 Flash或 JavaScript才能完成。 而使用純 CSS 來完成 這些變形無須載入這些額外的檔案， 再一次提升了開發效率， 提高了頁面的執行效率。 CSS 變形屬性及函式 CSS 變形允許動態的控制元素， 可以在螢幕周圍移動它們， 縮小或擴大、 旋轉， 或結合所有這些產生複雜的動畫效果。 通過CSS變形， 可以讓元素生成靜態視覺效果， 也可以很容易結合CSS3的 transition和動畫的keyframe產生 一些動畫效果： ·CSS3變形中具有 X/ Y可用的函式： translateX()、 translateY()、 scaleX()、 scaleY()、 skewX() 和 skewY()。 ·CSS32D變形函式包括： translate()、 scale()、 rotate() 和 skew()。 translate()函式接受CSS的標準度量單位； scale()函式接受 一個 0 ～ 1 之間的十進位制值； rotate() 和 skew() 兩個函式都接受 一個徑向的度量單位值deg。 除了rotate()函式之外， 每個函式都接受X軸和Y軸的引數。 2D變形中還有一個矩陣matrix()函式， 包括6個引數。 ·CSS3 3D變形函式包括： rotateX()、 rotateY()、 rotate3d()、 translateZ()、 translate3d()、 scaleZ() 和scale3d()。 3D變形中也包括一個矩陣matrix3d()函式， 包括16 個引數。 CSS 變形屬性詳解 transform屬性指一組轉換函式， transform-origin屬性指定元素的中心點在哪， 新增加了第三個數transform-origin-z， 控制元素三維空間中心點。 transform- style的值設定為 preserve- 3d， 建立 一個3D渲染環境。 ：CSS3 2D變形 在二維或三維空間， 元素可以被扭曲、 移位或旋轉。 只不過2D變形工作在X軸和Y軸， 也就是大家常說的水平軸和垂直軸； 而3D變形工作在X軸和Y軸之外， 還有一個Z 軸， 這些3D變換不僅可以 定義元素的長度和寬度， 還有深度。 首先討論元素在2D平面如何變換， 然後在進入3D變換的討論。 CSS3 2D變換讓Web設計師有了更多的自由來裝飾和變形HTML元件， 同時有更多的功能裝飾文字 和更多的動畫選項來裝飾div元素。 2D 位移 在這裡 translate是一種方法， 將元素向指定的方向移動， 類似於position中的relative。 可以簡單理解為， 使用translate()函式可以把元素從原來的位置移動， 而不影響在 X、 Y 軸上任何元件。 translate() 函式可以取一個值tx，也可以取兩個值tx和 ty， ·tx：代表X軸（ 橫座標）移動的向量長度， 當其值為正值時， 元素向X軸右方向移動， 反之其值為負值時， 元素向X軸左方向移動。 ·ty：代表Y軸（ 縱座標） 移動的向量長度，當其值為正值時， 元素向Y軸下方向移動， 反之其值為負值時， 元素向Y軸上方向移動。 如果ty沒有顯式設定時， 相當於ty=0。 結合起來， translate()函式移動元素主要有以下三種移動。 ·水平移動： 向右移動 translate( tx, 0) 和向左移動 translate(- tx, 0)。 ·垂直移動：向上移動 translate( 0,- ty) 和向下移動 translate( 0, ty)。 ·對角移動：右下角移動 translate( tx, ty)、右上角移動translate( tx,- ty)、 左上角移動translate(- tx,- ty) 和左下角移動translate(- tx, ty)。 如果要將物件沿著一個方向移動， 如沿著水平軸或者縱軸移動， 可以使用translate( tx, 0) 和translate( 0, ty)來實現。 其實在變形中還為單獨一個方向移動物件提供了更簡單的方法。 ·translateX()：水平方向移動一個物件。 通過給定一個X軸方向的數值指定物件沿水平軸方向的位移。簡單點說，物件只向X軸進行移動， 如果值為正值， 物件向右移動； 如果值為負值， 物件向左 移動。 ·translateY()：縱軸方向移動一個物件。 通過給定一個Y軸方向的數值指定物件沿縱軸方向的位移。 簡單點說，物件只向Y軸進行移動，如果值為正值，物件向下移動； 如果值為負值，物件 向上 移動。 這兩個函式和前面介紹的 translate()函式不同的是每個方法只接受一個值。 ·transform: translate(- 100px, 0) 實際上 等於 transform: translateX(- 100px)。 ·transform: translate( 0,- 100px) 實際上 等於 transform: translateY(- 100px)。 2D縮放 縮放函式scale()讓元素根據中心原點對物件進行縮放， 預設值為 1。 因此0. 01到 0. 99之間的任何值， 使一個元素縮小； 而任何大於或等於 1. 01的值， 讓元素顯得更大。 縮放scale()函式和translate()函式的語法非常相似， 可以接受一個值， 也可以接受兩個值， 只有一個值時， 其第二個值預設與第一個值相等。 其 取值 簡單 說明 如下： ·sx：指定橫向座標（ X 軸）方向的縮放向量， 如果值為0. 01 ～ 0. 99之間， 會讓物件在X 軸方向縮小， 如果值大於或等於1. 01， 物件在X 軸方向放大。 ·sy：指定縱向座標（ Y 軸）方向的縮放量， 如果值為 0. 01 ～ 0. 99 之間， 會讓物件在Y軸方向縮小， 如果值大於或等於1. 01， 物件在Y 軸方向放大。 ·scaleX()：相當於 scale( sx, 1)。 表示元素只在X軸（ 水平 方向） 縮放元素， 預設值是 1。 ·scaleY()：相當於 scale( 1, sy)。 表示元素只在Y軸（ 縱橫 方向） 縮放元素， 預設值是 1。 2D旋轉 旋轉函式rotate()通過指定的角度引數對元素根據物件原點指定 一個2D旋轉。 主要在二維空間內進行操作，接受一個角度值， 用來指定旋轉的幅度。 如果這個值為正值， 元素相對原點中心順時針 旋轉； 如果這個值為負值， 元素相對原點中心逆時針旋轉。 rotate() 函式只接受一個值a， 代表旋轉的角度值。 其取值可以是正的， 也可以是負的。 ·取值為正值時， 元素預設相對元素中心點順時針旋轉。 ·取值為負值時， 元素預設相對元素中心點逆時針旋轉。 2D傾斜 傾斜函式skew()能夠讓元素傾斜顯示， 可以將一個物件以其中心位置圍繞著X軸和Y軸 按照一定的角度傾斜。 與rotate()函式的旋轉不同， rotate()函式只是旋轉， 而不會改變元素的形狀。 skew() 函式 不會旋轉， 而只會改變元素的形狀。 ·ax： 指定元素水平方向（ X 軸 方向） 傾斜的角度。 ·ay： 指定元素垂直方向（ Y 軸 方向） 傾斜的角度。 skew() 函式和CSS3變形中的 translate()、 scale()函式一樣， 除了可以使用 skew( tx, ty)函式讓元素相於元素中心為原點在X軸和Y軸傾斜之外， 還可以使用使用 skewX() 和 skewY() 函式讓元素只在 水平或垂直方向傾斜。 ·skewX()：相當於skew( ax, 0) 和 skew( ax)。按給定的角度沿X軸指定一個傾斜變形。 skewX()使元素以其中心為基點， 並在水平方向（ X 軸）進行傾斜變形。 ·skewY()：相當於skew( 0, ay)。按給定的角度沿Y軸指定一個傾斜變形。 skewY()用來設定元素以其中心為基點並按給定的角度在垂直方向（ Y 軸） 傾斜變形。 在預設情況下，skew()函式都是以元素的原中心點對元素進行傾斜變形，但是同樣可以根據 transform- origin 屬性， 重新設定元素基點對元素進行傾斜變形。另外，skew()函式和製圖軟體中的變形 工具所起作用類似， 2D矩陣 CSS3中Transform讓操作變形變得很簡單， 如位移函式translate()、 縮放函式scale()、 旋轉函式rotate() 和傾斜函式skew()。 這幾個函式很簡單， 也很方便， 但是變形中的矩陣函式matrix()不常用。 當然， Web 設計師可以使用 rotate()、 skew()、 scale() 和 translate() 函式來滿足它們的變形需要， 那為什麼要使用矩陣matrix() 呢？ 在CSS3中的變形函式都可以使用matrix()函式來代替。 ：CSS3 3D變形 使用二維變形能夠改變元素在水平和垂直軸線， 然而還有一個軸沿著它， 可以改變元素。 使用三維變形， 可以改變元素在Z 軸位置。 三維變換使用基於二維變換的相同屬性， 如果熟悉二維變換會 發現， 3D變形的功能和2D變換的功能類似。 CSS3中的3D變換主要包括以下幾種功能函式： ·3D 位移： 包括 translateZ() 和 translate3d() 兩個功能函式。 ·3D 旋轉： 包括 rotateX()、 rotateY()、 rotateZ() 和 rotate3d() 四個功能函式。 ·3D 縮放： 包括 scaleZ() 和 scale3d() 兩個功能函式。 ·3D 矩陣： 和 2D 變形一樣， 也有 一個 3D矩陣功能函式 matrix3d()。 CSS3中3D 位移 主要包括兩種函式 translateZ() 和 translate3d()。 36. translate3d()函式的語法translate3d()函式使一個元素在三維空間移動。 這種變形的特點是， 使用三維向量的座標定義元素在每個方向移動多少。 translate3d( tx, ty, tz) 其屬性值取值說明如下： ·tx：代表橫向座標位移向量的長度； ·ty：代表縱向座標位移向量的長度； ·tz：代表Z軸位移向量的長度。 此值不能是一個百分比值， 如果取值為百分比值， 將會認為無效值。 37. translateZ()函式，功能是讓元素在3D空間沿Z軸進行位移， translate( t) 取值t指的是Z軸的向量位移長度。使用 translateZ()函式可以讓元素在Z 軸進行位移，當其值為負值時，元素在Z 軸越移越 遠，導致元素變得較小。反之，當其值為正值時，元素在Z軸越移越近， 導致 元素變得較大。 translateZ() 函式在實際使用中等同於translate3d( 0, 0, tz)。僅從視覺效果上看， translateZ() 和 translate3d( 0, 0, tz) 函式功能非常類似於二維空間的 scale() 縮放 函式， 但實際上完全不同。 translateZ() 和 translate3d( 0, 0, tz) 變形是發生在Z軸上， 而不是X軸和Y軸。 當使用3D變形， 能夠在Z軸上移動一個元素確實有很大的好處， 比如說在建立一個3D立方體的盒子之時。 CSS3中3D 縮放 scaleZ() 和 scale3d() 函式單獨使用時沒有任何效果， 需要配合其他的變形函式一起使用才會有效果。 CSS3 3D變形中的縮放主要有scaleZ()和scale3d()兩種函式， 當scale3d()中X軸和Y軸同時為1， 即scale3d( 1, 1, sz)，其效果等同於scaleZ( sz)。 38. scaleZ()3D縮放函式， 可以讓元素在Z軸上按比例縮放。 預設值為1， 當值大於1 時， 元素放大， 小於1大於0. 01時， 元素縮小。 scale3d( sx, sy, sz) sx： 橫向縮放比例 sy： 縱向縮放比例 sz： Z軸縮放比例。 CSS3中 3D 旋轉 在三維變形中， 可以讓元素在任何軸旋轉。 為此， CSS3新增三個旋轉函式 rotateX()、 rotateY() 和 rotateZ()。 在 三維空間 裡， 使用 rotateX()、 rotateY() 和 rotateZ() 函式 讓 一個 元素 圍繞 X、 Y、 Z 軸 旋轉， 其 基本 語法 如下： rotateX( a) rotateY( a) rotateZ( a) 其中 a 指的是一 個旋轉角度值， 其值可以是正值也可以是負值。 如果值為正值， 元素順時針旋轉； 反之， 值為負， 元素圍繞逆時針旋轉。 rotateZ() 函式 指定 元素 圍繞 Z 軸 旋轉， 如果 僅 從 視覺 角度 上看， rotateZ() 函式 讓 元素 順時針 或 逆時針 旋轉， 並且 效果 和 rotate() 效果 等同， 但不 是在 2D 平面 旋轉。 在 三維空間 裡， 除了 rotateX()、 rotateY() 和 rotateZ() 函式 可以 讓 一個 元素 在 三維空間 中 旋轉 之外， 還有 一個 屬性 函式 rotate3d()。 在 3D 空間， 旋轉 有 三個 角度 來 描述 一個 轉動 軸。 軸 的 旋轉 是由 一個[ x, y, z] 向量 並經 過 元素 原點。 其 基本 語法 如下： rotate3d( x, y, z, a) rotate3d() 中 取值 說明。 ·x： 0 ～ 1 的 數值， 用來 描述 元素 圍繞 X 軸 旋轉 的 向量 值。 ·y： 0 ～ 1 的 數值， 用來 描述 元素 圍繞 Y 軸 旋轉 的 向量 值。 ·z： 0 ～ 1 的 數值， 用來 描述 元素 圍繞 Z 軸 旋轉 的向量 值。 ·a： 角度 值， 用來 指定 元素 在 3D 空間 旋轉 的 角度， 如果 其 值 為 正值， 元素 順時針 旋轉， 反之 元素 逆時針 旋轉。 當 x、 y、 z 三個 值 同時 為 0 時， 元素 在 3D 空間 不做 任何 旋轉。 當 x、 y、 z 取 不同 值 時， 和 前面 介紹 的 三個 旋轉 函式 功能 等同。 ·rotateX( a) 函式 功能 等 同於 rotate3d( 1, 0, 0, a)。 ·rotateY( a) 函式 功能 等 同於 rotate3d( 0, 1, 0, a)。 ·rotateZ( a) 函式 功能 等 同於 rotate3d( 0, 0, 1, a)。 。。。。。。 十三，CSS3 過渡，多年來， Web前端開發人員一直在尋求通過HTML和CSS實現一些動畫互動效果， 而不再使用JavaScript 或Flash。 現在他們的願望實現了。 CSS3除了給我們帶來前面介紹的一些 特殊功能模組之外， 還為Web設計師添加了 一些動畫功能模組。 可以通過: hover、: focus、: active、: checked 或者JavaScript 觸發一個元素， 這樣， 外觀變化會顯得更細膩， 而不會讓人感覺“ 一觸即發”。 例如 懸浮 修改 連結色， 在 CSS2. 1 中滑鼠懸浮時， 立刻從一個顏色變成另一個顏色。 而在CSS3 中使用過渡功能， 滑鼠懸浮時， 顏色在一定的時間內， 從一個顏色過渡到另一個 顏色， 給使用者更好、 更細膩的體驗。 CSS3的過渡功能像是一種黃油， 通過一些CSS的簡單動作觸發樣式平滑過渡。 W3C標準中描述的transition功能很簡單： CSS3的transition允許CSS的屬性值在一定的時間區間內平滑地過渡。這種 效果可以在滑鼠單擊、 獲得焦點、 被點選或對元素任何改變中觸發， 並平滑地以動畫效果改變CSS的屬性值。 以往Web中的動畫都是依賴於JavaScript和Flash實現， 但原生CSS過渡在客戶端上需要處理的資源少得多， 從而顯得更加平滑。 CSS3過渡與元素上的常規樣式一起宣告。 只要目標屬性更改， 瀏覽器 就會應用過渡。 除了使用JavaScript 觸發動作