CSS3各個模塊詳解

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

1. inset： 陰影 類型， 可選 值。 如果不 設置， 其 默認 的 投影 方式 是 外 陰影； 如果 取其 唯一 值“ inset”， 就是 給 元素 設置 內 陰影。
2. x- offset： 陰影水平偏移量， 其值可以是正負值。 如果取正值， 則 陰影 在 元素 的 右邊， 反之 取 負值， 陰影 在 元素 的 左邊。
3. y- offset： 陰影垂直偏移量， 其值可以是正負值。 如果取正值， 則 陰影 在 元素 的 底部， 反之 取 負值， 陰影 在 元素 的 頂部。
4. blur- radius： 陰影模糊半徑， 可選參數。 其值只能是正值， 如果 取值 為“ 0” 時， 表示 陰影 不具 有 模糊 效果， 如果 取值 越大， 陰影 的 邊緣 就 越 模糊。
5. spread- radius： 陰影 擴展 半徑， 可選參數。 其值可以是正負值， 如果 取值 為 正值， 則 整個 陰影 都 延展 擴大， 反之 取值 為 負值， 則 整個 陰影 都 縮小。
6. color： 陰影 顏色， 可選 參數， 如果不設定任何顏色 時， 瀏覽器會取默認色， 但 各瀏覽器 默認色不一樣，
7. 在圖片上加內陰影，先給圖片添加一個容器，如：div等，
   二， border-radius 圓角
   http:/ /www.iis7.com/b/wzjk/
8. 圓形 border- radius 制作 圓角 有兩 點 技巧。 ·元素 的 寬度 和 高度 相同。 ·圓角 的 半徑 值 為 元素 寬度 或 寬度 的 一半 或者 直接 設置 圓角 半徑 值 為 50%。
9. 半圓 border- radius 制作半圓與制作圓形的方法是一樣 的， 只是元素的 寬度與圓角方位要配合一致， 不同的寬度和高度比例， 以及圓角方位， 可以制作上半圓、下半圓、 左半圓 和 右半圓 效果。
10. 扇形 border- radius 制作 扇形， 其實 就是 使用 border- radius 屬性 制作 四分之一 圓形。 遵循“ 三 同， 一 不同” 原則， 其中“ 三 同” 是指 元素 的 寬度、 高度 和 圓角 半徑 值 相同， 而“ 一 不同” 指的 是 圓角 位置 不同。 根據 圓角 取值 位置 不一樣， 可以分 左上、 右上、 右下 和 左下 四種 扇形 效果。
11. 橢圓 橢圓 其實 就是 一個 圓形 受到 擠壓 而成 的 一種 形狀， border- radius 制作 橢圓 也非 常 方便， 只 受限 于 元素 的 寬度 或 高度， 然后 就是 圓角 半徑， 制作 橢圓 的 圓角 半徑 和 其他 圖形 有所 不一樣， 需要 設置 圓角 的 水平 和 垂直 方向 的 半徑 值。 橢圓 有 兩種， 一種 是 水平 的， 另外 一種 是 垂直 的。 它們 之間 的 差別 只是 方向 性的 區別， 其 制作 方法 是 一樣 的。 制作 水平 橢圓， 元素 寬度 是 高度 的 2 倍， 而且 border- radius 的 水平 半徑 等于 元素 寬度， 垂直 半徑 等于 元素 高度； 而 垂直 橢圓 剛好 與水 平 橢圓 的 參數 相反。
    。。。。。。
    三， CSS3 背景
    背景主要包括五個屬性：
    1· background- color（ 背景 顏色）
    2· background- image（ 背景 圖片）
    3· background- repeat（ 背景 圖片 展示 方式）
    4· background- attachment（ 背景 圖片 是 固定 還是 滾動）
    5· background- position（ 背景 圖片 位置）
    可以單獨寫， 也可以將這些屬性串在 一起使用。
12. background- color 屬性，用來設置元素的背景顏色， 其默認值為“ transparent”， 不設置任何顏×××況下是透明色，
13. background- image 屬性，用來設置元素的背景圖片， 默認值為“ none”，< url> 是指背景圖片的地址， 這個地址可以是相對地址， 也可以是絕對地址。
14. background- repeat 屬性，用來設置元素背景圖片在元素的盒模型中的鋪放格式， 其默認為“ repeat”， 也就是背景圖片沿元素的X軸和Y軸同時平鋪，“ repeat- x”表示的是元素背景圖片沿元素 的X軸平鋪， Y軸不進行任何鋪 放；“ repeat- Y” 剛好相反， 元素背景圖片沿元素的Y軸平鋪， X軸不進行任何鋪 放；“ no- repeat”和 默認值“ repeat” 相反， 表示背景圖片不做任何鋪 放。
15. background- attachment 屬性，用來設置元素背景圖片是否固定或者隨著頁面的其余部分滾動， 其默認值為“ scroll”， 表示背景圖片會隨著瀏覽器滾動條一起滾動， 而取值為“ fixed” 時， 背景圖片 固定不動。 background- attachment 取值為“ fixed” 時， 一般運用在html或 body標簽 上， 使用在其他標簽上不能達到固定效果。
16. 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： 默認值。 將保持背景片的原始高度和寬度。
    ·<length>： 取具體的整數值（ 例如 px 值）， 將改變背景圖片的大小。
    ·<percentage>： 取值為百分值， 可以是 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 多陰影效果按照給定的順序應用， 因此前面的 陰影有可能會覆蓋后面的， 但是它們永遠會覆蓋文本本身。
17. CSS3 溢出文本屬性平時在網頁制作中一定碰到過內容溢出的問題， 如文章列表標題很長， 而其寬度又受到限制， 此時超出寬度的內容就會以省略 標記（…） 顯示。 以前實現這樣的效果都是由后臺 程序截取一定的字符數在前臺輸出， 另外一種方法就是使用 JavaScript 截取 一定 的 字符 數 實現。 可是 這 兩種 方法 都有 其 不足之處， 如 中文 和 英文 的 計算 字符 寬度 的 問題， 這個 值 不好 計算， 所以 造成 截取 字符 數 不好 控制， 從而其通用性也差。 CSS3 新增 了 text- overflow 屬性， 使得 這個 問題 迎刃而解。
    text- overflow 屬性 參數 比較 簡單， 只有兩個屬性值。
    ·clip： 不顯 示 省略 標記（…）， 只是 簡單 的 裁 切。
    ·ellipsis： 文本 溢出 時 顯示 省略 標記（…）， 省略 標記 插入 的 位置 是最 后 一個 字符。
    強制 文本 在 一行 顯示（ white- space: nowrap） 和 溢出 內容 隱藏（ overflow: hidden）， 并且 需要 定義 容器 的 寬度。
    text-overflow: ellipsis; overflow: hidden; 有省略號，需要這兩個屬性配合才有效，
    text-overflow: clip; overflow: hidden; 直接隱藏，需要這兩個屬性配合才有效，
18. 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 是最 亮 狀態。
19. RGB色彩模式，RGB色彩模式是光的三原色 紅、 綠、 藍 混合產生的。 Web頁面中使用的圖片在大多數是在RGB色彩模式中制作的。 RGB色彩是顏色相加混合產生的， 這樣的混合稱為 加色混合。 加色混合中， 補色是指相關的兩個顏色混合時， 成為白色的情況。
20. CMYK色彩模式，CMYK色彩模式是指顏料的三原色 青色、 洋紅、 ××× 加上 黑色， 這四種顏色減色混合表現出的色彩是主要用于出版印刷時制作圖像的一種模式。 減色混合是指是指顏色混合后出現 的色彩比原來的顏色暗淡， 這樣與補色相關的兩種顏色混合就會出現彩色的情況。
21. 索引色彩模式，索引色彩模式是已經被限定在256種顏色以內的模式， 主要用于Web頁面安全色彩和制作透明 GIF 圖片。 在 Photoshop 中制作透明GIF圖片時， 一定要使用索引色彩模式。
22. 灰度模式，灰度模式是無色彩模式， 在制作黑白圖片時使用， 主要用于處理 黑、白、灰色 圖片。
23. 雙色調模式，雙色調模式是在黑白圖片中加入顏色， 使色調更加豐富的模式。 RGB、 CMYK 等顏色模式都不可以直接轉換為雙色調模式， 必須將色彩模式先轉換為灰度模式后， 才能夠轉換為雙色調 模式。 用雙色調模式可以用很小的空間制作出漂亮的圖片。
24. 位圖模式，位圖模式是 用白色和黑色共同處理圖片的模式。 與雙色調一樣， 除雙色調模式和灰度模式外， 其他色彩模式都需要轉換為灰度模式后， 再轉換為位圖模式。 位圖模式可以選定5種圖片 處理 方法：
    1） 50% 閾值， 是在 256 種 顏色 中， 當 顏色 值 大于 129 就 處理 為 白色， 反之則處理為黑色。
    2） 圖案仿色， 是按一定的模式處理圖片。
    3） 擴散仿色為最常用的選項， 是按黑色和白色的陰影使其分布。
    4） 半調網屏與自定圖案， 是利用盲點的各種形態和密度與用戶自己設置樣式的處理方式。
    CSS3 顏色模式在 CSS2. 的基礎 CSS3上 新增了 RGBA、 HSL 和 HSLA，
25. RGBA 在 RGB 基礎上 增加 了控制 alpha 透明度的參數， 其中 RGB 顏色 模式（ 也稱 為 三原色） 是工業界 的 一種 顏色標準， 通過對 紅（ R）、 綠（ G）、 藍（ B） 三個 顏色 通道 的 變化 以及 它們 相互 之間 的 疊加 得到 各種 顏色，RGB幾乎包括人類視力所能感知的所有顏色， 是目前運用最廣的顏色系統之一。 而RGBA 僅在 RGB 的 基礎上 增加 了 alpha 通道， 用來 設置 顏色 的 透明度。
    RGBA 的 屬性 參數 很 簡單， 分別 代表 紅綠 藍 以及 透明度 的 值。
    ·R： 紅色 值， 其 取值 可以 是 正 整數 或者 百 分值。
    ·G： 綠色 值， 其 取值 可以 是 正 整數 或者 百 分值。
    ·B： 藍色 值， 其 取值 可以 是 正 整數 或者 百 分值。
    ·A： alpha 透明 值， 其 取值 在 0 ～ 1 范圍 之間。
    這幾個參數值都不可以取負值。
26. 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% 最亮（ 白色）。
27. 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 規則是比較難實現的一些 復雜布局表現， 如今也變得更加容易。
28. 彈性盒模型 　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， 新的術語和概念可能是一個障礙， 所以首先了解基本概念。
29. 主軸和側軸在 Flexbox 模型中與布局計算偏向使用書寫模式方向的塊布局與行內布局不同， 伸縮 布局 偏向 使用 伸縮 流的 方向。一個 row伸縮容器中各種方向與大小術語
    ·主軸、主軸方向： 用戶代理沿著一個伸縮容的主軸配置伸縮項目， 主軸是主軸方向的延伸。 伸縮容器的主軸， 伸縮項目主要沿著這條軸進行布局。 小心， 它不一定是水平的， 這主要取決于 justify- content 屬性。 如果 其 取值 為 column， 主軸的方向為縱向的。
    ·主軸起點、主軸終點： 伸縮項目的配置從容器的主軸起點邊開始， 往主軸終點邊結束。 也就是說， 伸縮項目放置在伸縮容器內從主軸起點（ main- start） 向主軸終點（ main- end）方向。
    ·主軸長度、主軸長度屬性： 伸縮項目的在主軸方向的寬度或高度就是項目的主軸長度， 伸縮項目的主軸長度屬性是 width 或 height 屬性， 由哪一個對著主軸方向決定。
    ·側軸、側軸方向： 與主軸垂直的軸稱做側軸， 側軸是側軸方向的延伸。 主要取決于主軸方向。
    ·側軸起點、側軸終點： 填滿項目的伸縮行的配置配置從容器的側軸起點邊開始， 往側軸終點邊結束。
    ·側軸長度、 側軸長度屬性： 伸縮項目的在側軸方向的寬度或高度就是項目的側軸長度， 伸縮項目的側軸長度屬性是 width 或 height 屬性， 由 一個 對著 側 軸 方向 決定。
30. 伸縮容器和伸縮項目通過 display 屬性顯式地給 一個元素 設置為 flex或者inline- flex， 這個容器就是一個伸縮容器。 伸縮容器會為其內容創立新的伸縮 格式化上下文， 其中設置為 flex 的容器 被 渲染為 一個塊級元素， 而設置 為inline- flex 的容器則渲染 為 一個行內元素。 若 元素 display 的 指定 值 是 inline- flex 且元素 是一 個浮動或絕對定位元素， 則 display 的計算值是flex。 一個伸縮容器的內容具有零個以上的伸縮項目—— 伸縮容器的每個子元素（ 除了 需要 盒 修復 的 元素 之外） 都會成為 一個伸縮項目， 且用戶代理會將任何直接在伸縮容器里的連續文字塊包起來 成為 匿名伸縮項目。
31. 伸縮容器的屬性Flexbox伸縮布局中伸縮容器和伸縮項目是伸縮布局模塊中的重要部分， 其中每一部分都具有各自的屬性。 伸縮容器的屬性包括以下幾個：
    1） 伸縮流方向。 是指伸縮容器的主軸方向， 其決定了伸縮項目放置在伸縮容器的方向。 伸縮流方向主要通過flex- direction屬性來設置， 其默認值為row。 伸縮流方向和書寫模式有關系， 換句話說， 伸縮項目根據書寫模式的方向布局。
    2） 伸縮行換行。 伸縮項目在伸縮容器中有時候也會溢出伸縮容器。 與傳統的盒模型一樣， CSS允許使用overflow屬性來處理溢出內容的顯示方式。 在伸縮容器中有一個伸縮換行屬性， 主要用來 設置伸縮容器的伸縮項目是單行顯示還是多行顯示， 以及決定側軸的方向。 使用此屬性來啟用溢出的伸縮容器的伸縮項目自動換行到下一行以及控制流動方向。 在伸縮容器屬性中， 主要通過 flex- wrap 屬性來設置伸縮項目是否換行， 默認值為 nowrap。
    3） 伸縮方向與換行。 是 伸縮 流 方向 與 伸縮 換行 的 結 合物， 換句話說， 伸縮 方向 與 換行 屬性 flex- flow 同時 設定 了 伸縮 流 方向 flex- direction 和 伸縮 換行 flex- wrap 兩個 屬性， 簡而言之 是 這 兩個 屬性 的 縮寫， 這 兩個 屬性 決定了 伸縮 容器 的 主軸 與 側 軸。
    4） 主軸對齊。 用來設置伸縮容器當前行伸縮項目在主軸方向的對齊方式， 指定 如何 在 伸縮 項目 之間 分布 伸縮 容器 額外 空間。 當 一 行上 的 所 伸縮 項目 不能 伸縮 或 可伸縮 但 已達 到 最大 長度 時， 這一 屬性 才會 對 伸縮 容器 額外 空間 進行 分配。 當 伸縮 項目 溢出 某 一行 時， 這一 屬性 也會 在 項目 的 對齊 上 施加 一些 控制。
    5） 側軸對齊。 伸縮 項目 可以 在 伸縮 容器 當前 行的 側 軸上 進行 對齊， 這類 似于 主軸 對齊 方式， 只是 另一個 方向。 也就是說 側 軸 對齊 主要 用來 指定 伸縮 項目 在 伸縮 容器 中 如何 放置 和 對齊 的 方式。 換句話說， 用來 定義 伸縮 項目 在 伸縮 容器 的 當前 行的 側 軸上 對齊 方式。
    6） 堆棧伸縮行。 用來 定義 伸縮 容器 中 伸縮 項目 行在 側 軸 的 對齊 方式， 類似于 側 軸 對齊， 只不過 這是 用來 控制 伸縮 項目 行在 布局 軸 的 堆放 方式。
32. 伸縮項目的屬性一個伸縮項目是一 個伸縮容器的子元素。 伸縮容器中的文本也被視為一個 伸縮項目。 伸縮 項目 中 內容 與 普通 流 一樣。 比如說， 當 一個 伸縮 項目 被 設置 為 浮動， 依然 可以 在這 個 伸縮 項目 中 放置 一個 浮動 元素。 伸縮 項目 都有 一個 主軸 長度 和 一個 側 軸 長度。 主軸 長度 是 伸縮 項目 在 主 軸上 的 尺寸， 側 軸 長度 是 伸縮 項目 在 側 軸上 的 尺寸。 或者說，一個 伸縮 項目 的 寬度 或 高 取決于 伸縮 容器 的 軸， 可能 就是 它的 主軸 長度 或側 軸 長度。 下面 的 幾個 屬性 可以 調整 伸縮 項目 的 行為：
    1） 顯示順序。 伸縮 容器 中的 伸縮 項目 默認 顯示 順序 是 遵循 文檔 在 源 碼 中的 出現 的 先后 順序（ HTML 文檔 的 DOM 結構 中的 先后 順序）。 可以 通過 伸縮 項目 的 顯示 順序 修改 伸縮 項目 在 頁面 中 顯示 順序， 也可以 通過 這個 屬性 對 伸縮 項目 進行 排序 組合。
    2） 側軸對齊。 包括 兩種， 一種 是 align- items 屬性， 可以 用來 設置 伸縮 容器 中 包括 匿名 伸縮 項目 的 所有 項目 的 對齊 方式； 另一種 是 align- self 屬性， 主要 用來 在 單獨 的 伸縮 項 目上 覆 寫 默認 的 對齊 方式。 對于 匿名 伸縮 項目， align- self 的 值 永遠 與其 關聯 的 伸縮 容器 的 align- items 的 值 相同。
    3） 伸縮性。 定義 伸縮 項目 可改變 它們 的 寬度 或 高度 填補 可用 的 空間。 可以 將 伸縮 容器 的 額外 空間 分 發給 其 伸縮 項目（ 與 伸縮 項 目的 正 彈性 成正比） 或將 它們 縮小 以防 止 伸縮 項目 溢出（ 與 伸縮 項 目的 負 彈性 成正比）。
33. 伸縮行伸縮項目 沿著 伸縮 容器 內 的 一個 伸縮 行 定位。 伸縮 容器 可以 是 單行 的， 也可以 是 多 行的。 其 主 要由 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 漸變，漸變是兩種或多種顏色之間的平滑過渡。
34. 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。 其值主要有以下幾種： ·<length>： 用長度值指定徑向漸變圓心的橫坐標或縱坐標， 可以為負值。
    ·<percentage>： 用百分比指定徑向漸變圓心的橫坐標或縱坐標， 可以為負值。
    ·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()。
35. translate3d()函數的語法translate3d()函數使一個元素在三維空間移動。 這種變形的特點是， 使用三維向量的坐標定義元素在每個方向移動多少。
    translate3d( tx, ty, tz)
    其屬性值取值說明如下：
    ·tx：代表橫向坐標位移向量的長度；
    ·ty：代表縱向坐標位移向量的長度；
    ·tz：代表Z軸位移向量的長度。 此值不能是一個百分比值， 如果取值為百分比值， 將會認為無效值。
36. 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)。
37. 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 觸發動作外， 在CSS中也可以通過一些偽類來觸發， 如： hover、: focus、: active、: target 和: checked 等。 這很重要： 無須在 JavaScript 中編寫動畫， 只需 要更改一個屬性值并依賴瀏覽器來執行所有重要工作。 以下 是 使用 CSS 創建 簡單 過渡 的 步驟：
    1） 在默認樣式中聲明元素的初始狀態樣式。
    2） 聲明過渡元素最終狀態樣式， 比如懸浮狀態。
    3） 在默認樣式中通過添加過渡函數， 添加一些不同的樣式。
    transition屬性是一個復合屬性， 出于簡潔性和便于維護考慮， 過渡語法通常以簡化的形式表達。
    transition 屬性主要包含四個屬性值：
    ·transition- property： 指定過渡或動態模擬的CSS屬性。
    ·transition- duration： 指定完成過渡所需的時間。
    ·transition- timing- function： 指定過渡函數。
    ·transition- delay： 指定過渡開始出現的延遲時間。
    指定過渡函數 transition- timing- function transition- timing- function 屬性指定某種指代過渡“ 緩動函數” 的屬性。 此屬性可指定瀏覽器的過渡速度， 以及過渡期間的操作進展情況， 可以將某個 值指定為預定義函數、 階梯函數 或者 三次貝塞爾曲線。
    到目前為止， 看到的 ease、 linear、 ease- in、 ease- out 和 ease- in- out 等曲線函數非常一般， 用于過渡動畫中也不是十分精確。而現在制作一些動畫需求越來越精確，需要定義一些更精確的 函數。
    CSS3 的transition 中， 定義三次貝塞爾曲線的語法如右所示： cubic-bezier( P0, P1, P2, P3)
    一個三次貝塞爾曲線由四個點控制曲線形狀。每個點由水平和垂直兩個值來確定， 也就是常說的由X和Y值確定。
    這些點的值是小數或者百分比， 不過很少看到使用百分比來設置一個三次貝塞爾曲線點。而且它們的值都是一個0 ～ 1 的小數。 不過有一點需要特別注意， 三次貝塞爾曲線中的P0 和 P 兩個點是無法 設置的， 因為它們總是存在HTML中， 也就是說它們總會是（ 0， 0）和（ 1， 1）。
    注意，三次貝塞爾曲線中的每個點值只允許 0 ～ 1 的值。
    step() 函數 step()函數用于把整個操作領域劃成同樣大小的間隔， 每個間隔都是都是相等的。 該函數還指定發生在開始或結束的時間間隔是否另外輸出百分比（ 換句話說， 如果輸出的百分比為 0% 表示輸入變化的初始點）。
    step() 函數非常獨特， 它允許在固定的間隔播放動畫。 例如， 在 step() 函數圖上可以看出， 動畫屬性比在 0% 處開始，漲到50%， 動畫結束時， 屬性值達到100%（ 也就是結束狀態屬性）。 并且 在各個 step() 函數中 每個步驟在過渡動畫中不夠平滑
    step(< integer>[,[ start| end]]?) step() 函數主要包括兩個參數。
    ·第一個參數是一 個數值< integer>， 主要用來指定step()函數間隔的數量， 此值必須是一個大于0的正整數。
    ·第二個參數是可選的， 是start或end， 如果第二個參數忽略， 則默認為end值。 其中step( 1, start)相當于step- start； step( 1, end)相當于step- end。
    偽元素觸發
    使用 transition 時， 常用鼠標懸浮（: hover） 來觸發過渡。
    為說明這與觸發過渡的實際事件毫無關聯， 也為強調狀態變化的重要性， 下面提供了 一些觸發過渡的其他方法。
38. 使用: active “:active”偽類表示用戶單擊某個元素并按住鼠標按鈕時顯示的狀態。
39. 使用: focus“:focus”偽類通常會在元素接收鍵盤焦點時出現。文本輸入框元素上將發生過渡， 且該元素得到焦點時會執行文本輸入框元素寬度和背景色過渡。
    此處作為一個邊點， 當對“: hover”偽類應用過渡時， 最好將“: focus”添加到選擇器堆棧。 這樣將能夠豐富鼠標用戶和鍵盤用戶的體驗。
40. 使用: checked “:checked”偽類在發生以下狀況時觸發過渡。 文本框選中時，
41. 媒體查詢觸發 觸發元素狀態變化的另一種方法是使用CSS3媒體查詢（ Media Queries）。
42. JavaScript 觸發 如果可以基于CSS的狀態更改觸發過渡， 自然可以通過 JavaScript做到這一點。
    隱式過渡 “隱式過渡”指的是 當 一個屬性改變時引起另一個屬性到一個屬性的過渡。
    。。。。。。
    十四，CSS3 動畫
    雖然transition在一定的時間內可以實現元素的初始狀態在指定的時間范圍過渡最終狀態， 模擬一種過渡動畫效果， 但它的功能是非常有限的。 因此， CSS3 新增了 一個動畫屬性 animation。 與過渡 屬性 transition 屬性不同的是， CSS3 的 animation 屬性可以像Flash制作動畫一樣， 通過關鍵幀控制動畫的每一步， 實現更為復雜的動畫效果。
    CSS3中通過animation實現動畫和transition實現動畫非常類似， 都是通過改變元素的屬性值來實現動畫效果的。
    它們的區別主要在于： 使用 transition屬性只能通過指定屬性的初始狀態和結束狀態， 然后在兩個狀態之間進行平滑過渡的方式來實現動畫。
    而animation實現動畫效果主要由兩個部分組成：
    1） 通過類似Flash動畫中的關鍵幀來聲明一個動畫；
    2） 在animation屬性中調用關鍵幀聲明的動畫，從而實現一個更為復雜的動畫效果。
    CSS3 動畫屬性animation和CSS3的transition屬性一樣是一個復合屬性，它包含了8個屬性：
    animation-name、主要用來指定一個關鍵幀動畫的名字， 這個動畫名必須對應一個@keyframes規則。 CSS加載時會應用animation-name指定的動畫， 從而執行動畫。
    animation-duration、主要用來設置動畫播放所需時間， 一般以秒為單位。
    animation-timing- function、 主要用來設置動畫的播放方式， 與transition-timing-function類似。
    animation-delay、 主要用來指定動畫開始時間， 一般以秒為單位。
    animation-iteration- count、 主要用來指定動畫播放的循環次數。
    animation-direction、 主要用來指定動畫的播放方向。
    animation-play- state，主要用來控制動畫的播放狀態。
    animation-fill- mode，主要用來設置動畫的時間外屬性。
    ：關鍵幀
    在CSS3中， 把@keyframes稱為關鍵幀，
    @keyframes 的作用
    transition制作一個簡單的動畫效果時， 包括了元素的初始屬性和最終屬性， 一個開始執行動作時間和一個延遲動作時間以及一個動作變換速率， 其實這些值都是一個中間值， 如果要控制得更細一些， 比如說 要第一個時間段執行什么動作， 第二個時間段執行什么動作（ 換到Flash制作動畫中來說，就是第一幀要執行什么動作，第二幀執行什么動作）， 這樣用 transition 就很難實現了， 此時也需要一個“ 關鍵 幀”來控制。 在CSS3中就是通過@keyframes屬性來實現這樣的效果的。
    @keyframes的語法
    @keyframes具有其自己的語法規則， 命名是由@keyframes開頭， 后面緊跟著是“ 動畫的名稱” 加上一對花括號“{...}”，括號中就不同時間段樣式規則，有點像CSS的樣式寫法。一個@ keyframes 中的樣式規則是由多個百分比構成的， 如 0% ～100%， 可以在這個規則中創建更多個百分比， 分別給每個百分比中需要有動畫效果的元素加上不同的屬性， 從而讓元素達到一種不斷變化的效果， 比如說移動，再比如改變元素顏色、位置、大小和形狀等。 不過有一點需要注意， 可以使用“ frome”“ to”代表一個動畫是從哪開始，到哪結束，也就是說 from就相當于0%，而to相當于 100%。 值得說的是， 0%不能像別的屬性取值 一樣把百分比符號省略， 在這里必須加上百分符號（%）。如果沒有加上，這個@keyframes是無效的，不起任何作用。 因為@keyframes的單位只接受百分 比值。@keyframes可以指定任何順序排列來決定animation動畫變化的關鍵位置
    CSS中為元素應用動畫
    要在CSS中為元素應用動畫， 首先要創建一個已命名的動畫，然后將它附加到該元素屬性聲明塊中的一個元素上。 動畫本身并不執行任何操作； 為了向元素應用動畫，需要將動畫與元素關聯起來。 這個要創建的動畫， 必須使用@keyframes來聲明（ 或者對于當前的Webkit實現， 使用@-webkit-keyframes）， 后跟所選擇的名稱， 該名稱主要用于對動畫的聲明作用， 然后指定關鍵幀。
    ：CSS3動畫8個子屬性詳解
43. animation-name 調用動畫
    animation-name屬性主要是用來調用動畫，其調用的動畫是通過@keyframes關鍵幀定義好的動畫。 該屬性的使用語法如右所示： animation-name: none | IDENT[, none| DENT]*;
    animation-name 是用來定義一個動畫的名稱， 其主要有兩個值。
    ·IDENT：是由@keyframes創建的動畫名稱， 換句話說 此處的 IDENT需要和@keyframes中的IDENT 一致， 如果不一致將不能實現任何動畫效果。
    ·none：為默認值， 當值為none 時， 將沒有任何動畫效果， 其可以用于覆蓋任何動畫。
44. animation-duration 設置動畫播放時間
    animation-duration主要用來設置CSS3動畫播放時間， 其基本語法如右所示： animation- duration: < time>[,< time>]*
    animation-duration和transition-duration使用方法類似，是用來指定元素播放動畫所持續的時間，也就是完成從0% ～100% 一次動畫所需時間， 取值< time> 為數值， 單位為秒， 其默認值為 0， 這意味著動畫周期為0， 也就是沒有動畫效果。 如果值為負值會被視為0。
45. animation-timing-function 設置動畫播放方式
    animation-timing-function屬性主要是用來設置動畫播放方式， 其基本語法如右所示： animation- timing- function: ease | linear | ease- in | ease- out | ease- in- out
    animation-timing-function是指元素根據時間的推進來改變屬性值的變換速率，說得簡單點就是動畫的播放方式。 他和transition中的transition-timing-function一樣， 具有以下幾種變換方式： ease、ease- in、ease-in-out、 ease-out、 linear和cubic-bezier。
46. animation-delay 設置動畫開始播放的時間
    animation-delay屬性用來定義動畫開始播放的時間、 是延遲還是提前等。 該屬性的基本語法右所示： animation- delay:< time>[,< time>]* 換句話說， animation- delay 屬性用于定義在瀏覽開始 執行動畫之前等待的時間。
47. animation-iteration-count 設置動畫播放次數
    animation-iteration-count 屬性主要用來定義動畫的播放次數。 其基本語法如右所示： animation-iteration-count: infinite | < number> [, infinite | < number>]* 此屬性主要用于定義動畫播放 多少次， 其值通常為整數， 但也可以使用帶有小數的數字。 其默認值 1， 這意味著動畫將從開始到結束只播放一次。 如果取值為infinite， 動畫將會無限次地播放。
48. animation-direction 設置動畫播放方向
    animation-direction屬性主要用來設置動畫播放方向， 其基本語法如右所示： animation- direction: normal | alternate [, normal | alternate]* animation- direction 是用來指定元素動畫播放的 方向， 其主要有兩個值， 默認值為 normal， 如果設置為normal時， 動畫的每次循環都是向前播放； 另一個值是alternate，它的作用是，動畫播放為偶數次則向前播放，為奇數次則向反方向播放。 例如一個彈跳動畫中， 可以為落下的球提供關鍵幀， 然后將animation-direction取值為alternate來控制播放動畫的每秒中反轉它。
49. animation-play-state 設置動畫的播放狀態
    animation-play-state屬性主要用來控制元素動畫的播放狀態， 其基本語法如右所示： animation-play-state: running | paused [, running | paused]* 主要有兩個值： running 和 paused。 其中 running為默認值， 主要作用類似于音樂播放器， 可以通過paused將正在播放的動畫停下來， 也可以通過running將暫停的動畫重新播放， 這里的重新播放不一定是從元素動畫的開始播放， 也可能是 從暫停的那個位置開始播放。 另外如果暫停了動畫的播放， 元素的樣式將回到最原始設置狀態。
50. 設置動畫時間外屬性 animation-fill-mode
    animation-fill-mode屬性定義在動畫開始之前和結束之后發生的操作，其基本語法如右所示： animation-fill-mode: none | forwards | backwards | both 主要有四個值： none、forwards、 backwards和both。其默認值為none，表示動畫將按預期進行和結束，在動畫完成其最后一幀時，動畫會反轉到初始幀處。當其取值為forwards時，動畫在結束后繼續應用最后關鍵幀的位置。 當 其取值為 backwards 時，會在向元素應用動畫樣式時迅速應用動畫的初始幀。當其取值為both時，元素動畫同時具有forwards和backwards效果。在默認情況之下，動畫不會影響它的關鍵幀之外的 屬性， 但使用animation-fill-mode屬性， 可以修改動畫的默認行為。簡單地理解 就是告訴動畫在第一個關鍵幀上等待動畫開始， 或者在動畫結束時停在最后一個關鍵幀上而不回到動畫第一幀 上， 或者同時具有這兩個效果。
    。。。。。。
    十五，媒體特性與Responsive設計
    隨著科學技術不斷地向前發展，網頁的瀏覽終端越來越多樣化，用戶可以通過寬屏電視、臺式電腦、筆記本電腦、平板電腦和智能手機來訪問網站。盡管無法保證一個網站在不同屏幕尺寸和不同設備上 看起來一模一樣， 但至少要讓你的Web頁面能適配用戶的終端， 讓它更好地呈現在用戶面前。 使用CSS3中的MediaQuery模塊來讓一個頁面適應不同的終端（ 或屏幕尺寸）， 從而讓頁面有一個更好 的用戶體驗。
    媒體類型媒體類型（ Media Type） 在CSS2中是一個常見的屬性， 也是一個非常有用的屬性， 可以通過媒體類型對不同的設備指定不同的樣式。
    媒體類型引用方法在實際中媒體類型有近十種之多， 實際常用的也就那么幾種。 不過媒體類型的引用方法也有多種， 常見的媒體類型引用方法主要有：
    link標簽、
    xml方式、
    @import
    CSS3新增的@media
51. link方法
    link方法引入媒體類型其實就是在< link>標簽引用樣式的時候， 通過link標簽中的media屬性來指定不同的媒體類型。 這種方式引入媒體類型時常跟著引用的樣式文件走， 如下所示：
    < link rel="stylesheet" type=" text/css" href="style.css" media="screen" /> < link rel=" stylesheet" type=" text/css" href=" print.css" media=" print" />
52. xml方式
    xml方式引用媒體類型和link引入媒體類型極其相似， 也是通過media屬性來指定。
    <? xml- stylesheet rel=" stylesheet" media=" screen" href=" style. css" ?>
53. @import方式
    @import是用來引用樣式文件方法之一， 同樣也可以用來引用媒體類型。@import引入媒體類型主要有兩種方式，
    一種：是在樣式中通過@import調用另一個樣式文件；
    另一種：是在< head></ head>標簽中的< style></ style>中引入， 但這種使用方法在IE 6 和 IE 7 中都不被支持， 如樣式文件中調用另一個樣式文件時， 就可以指定對應的媒體類型。 @import url( reset. css) screen; @import url( print. css) print; 在<head>中的<style>標簽中引入媒體類型方法。 <head> <style type=" text/css"> @import url( style.css) all; </style> </head>
54. @media方式
    @media是CSS3中新引進的一個特性， 稱為媒體查詢。 在頁面中也可以通過這個屬性來引入媒體類型。@media引入媒體類型和@import有點類似， 也具有兩種方式：
    1） 在樣式文件中引用媒體類型： @media screen { 選擇器{/ 你的樣式代碼寫在這里…/} }
    2） 使用@media引入媒體類型的方式是在<head> 標簽中的<style>中引用。 <head> <style type=" text/css"> @media screen{ 選擇器{/ 你的 樣式 代碼 寫在 這里…/} } </ style> </ head>
    媒體特性
    媒體特性（Media Query）是CSS3對媒體類型（ Media Type） 的增強版， 其實可以將Media Query看成“ Media Type（ 判斷條件）+ CSS（ 符合條件的樣式規則）”。
    Media Query和CSS的屬性集合很相似， 主要區別在如下：
    ·Media Query 只接受單個的邏輯表達式作為其值， 或者沒有值。
    ·CSS屬性用于聲明如何表現頁面的信息； 而Media Query是一個用于判斷輸出設備是否滿足某種條件的表達式。
    ·Media Query 中的大部分接受 min/ max 前綴， 用來表達其邏輯關系， 表示應用于大于等于或小于等于某個值的情況。
    ·CSS屬性要求必須有屬性值， Media Query 可以沒有值， 因為其表達式返回的只有真或假兩種。
    Media Query使用方法
    Media Query 能在不同的條件下使用不同的樣式， 使頁面在不同在終端設備下達到不同的渲染效果。 Media Query 有其自己的使用規則。 具體來說， Media Query 的使用方法如下。
    @media 媒體類型 and （媒體特性）{ 你的樣式} 使用 Media Query 時必須要使用@media開頭， 然后指定媒體類型（ 也可以稱為設備類型）， 隨后是指定媒體特性（ 也可以稱之為設備特性）。
    媒體特性的書寫方式和樣式的書寫方式非常相似， 主要分為兩個部分，
    第一個部分 指的是媒特性，
    第二個部分 為媒體特性 所指定的值， 而且這兩個部分之間使用冒號分隔。 例如： (max- width: 480px) 將其組合就類似于不同的 CSS集合。 但與CSS屬性不同的是， 媒體特性是通過min/ max 來 表示大于、 等于或小于作為邏輯判斷， 而不是使用小于（<） 和 大于（>） 這樣的符號來判斷。
55. 最大寬度 max-width “max-width” 是媒體特性中最常用的一個特性， 其意思是指媒體類型小于或等于指定的寬度時， 樣式生效，
56. 最小寬度 min-width min-width與max-width相反， 即媒體類型大于或等于指定寬度時， 樣式生效。
57. 多個媒體特性使用 Media Queries 可以使用關鍵詞“ and” 將多個媒體特性結合在一起。 也就是說， 一個Media Query中可以包含0到多個表達式， 表達式又可以包含0到多個關鍵字， 以及一種 媒體類型。
58. 設備屏幕的輸出寬度 Device Width 在智能設備上， 例如 iPhone、 iPad 等， 還可以根據屏幕尺寸來設置相應的樣式（ 或者調用相應的樣式文件）。 對于屏幕同樣可以使用 min/ max 對應參數， 如min-device-width 或者 max-device-width。
59. not關鍵詞 關鍵詞not用來排除某種制定的媒體類型， 也就是排除符合表達式的設備。 換句話說， not關鍵詞表示對后面的表達式執行取反操作。如下所示：
    @media not print and (max- width: 1200px){ 樣式 代碼} 代碼表示的是， 樣式代碼將被使用在除打印設備和屏幕寬度小于1200px的所有設備中。
60. only關鍵詞 only用來指定某種特定的媒體類型， 可以排除不支持媒體查詢的瀏覽器。 其實only很多時候是用來對不支持Media Query 卻支持 Media Type 的設備隱藏樣式表。 例如， 支持媒體特性 的設備正常調用樣式， 此時就當only不存在；不支持媒體特性但支持媒體類型的設備， 這樣就不會讀樣式， 因為其會先讀取only而不是screen； 不支持 Media Query 的瀏覽器， 不論是否支持 only， 樣式都不會被采用。
    ：Responsive(響應式)布局概念
    隨著用戶訪問Web頁面終端多樣化， 比如說 iPad、 iPhone、 平板電腦、 臺式機以及筆記本等， 以前的設計目前再無法適應這些多樣化的終端設備。 為了滿足用戶的需求， Ethan Marcotte 在A List Apart 發表了 一篇開創性的文章， 將三種已有的開發技術（ 彈性網格布局、彈性圖片、媒體和媒體查詢） 整合起來， 并將其命名為RWD（ Responsive Web Design， 響應式設計）。
    什么是響應式設計呢？
    維基百科是這樣描述的： Responsive設計為RWD， 是精心提供各種設備都能瀏覽網頁的一種設計方法， RWD能讓網頁在不同的設備中展現不同的設計風格。 由此可見， RWD不是流體布局， 也不是 網格布局， 而是一種獨特的網頁設計方法。
    Responsive設計特點
    Responsive網頁設計 不但要考慮其元素布局的秩序， 還要做到“ 有求必應”， 因此需要滿足三個條件。 Responsive設計之父 Ethan Marcotte是這樣描述這三個條件的。
    ·網站必須建立靈活的網格基礎；
    ·引用到網站的圖片必須是可伸縮的；
    ·不同的顯示風格， 需要在 Media Query 上設置不同的樣式。
    缺少任何一個功能， 就不能稱為是合格的Responsive網頁設計。
    Responsive中的術語
    在響應式設計中， 有一些其專有的術語， 而且理解這些術語對于幫助理解和學習響應式設計至關重要。
61. 流體網格
    流體網格是一個簡單的網格系統，這種網格設計參考了流體設計中的網格系統，將每個網格格子使用百分比單位來控制網格大小。這種網格系統最大的好處是讓網格大小隨時根據屏幕尺寸大小做出相 對應的比例縮放。
62. 彈性圖片
    彈性圖片指的是不給圖片設置固定尺寸，而是根據流體網格進行縮放， 用于適應各種網格的尺寸。 而實現方法是比較簡單， 一條代碼就能確定。img {max- width: 100%;}
63. 媒體查詢
    媒體查詢在CSS3中得到了強大的擴展。 使用這個屬性可以讓設計根據用戶終端設備適配對應的樣式。 這也是響應式設計中最為關鍵的。 可以說， Responsive設計離開了 Medial Query 就失去了它 生存的意義。 簡單地說，
    媒體查詢可以根據設備的尺寸， 查詢出適配的樣式。
    Responsive設計最關注的就是： 根據用戶的使用設備的當前寬度， Web頁面將加載一個備用的樣式， 實現特定的頁面 風格。
64. 屏幕分辨率
    屏幕分辨率指的是用戶使用的設備瀏覽Web頁面時的分辨率， 比如智能手機瀏覽器、 移動電腦瀏覽器、 平板電腦瀏覽器和桌面瀏覽器。 Responsive設計利用Media Query屬性針對瀏覽器使用的 分辨率來適配對應的CSS樣式。 因此屏幕分辨率在Responsive設計中是一個很重要的東西， 因為只有知道Web頁面要在哪種分辨率下顯示何種效果， 才能調用對應的樣式。
65. 主要斷點
    主要斷點， 在Web開發中是一個新詞， 但其是 Responsive 設計中很重要的一部分。 簡單的描述就是， 設備寬度的臨界點。 在 Media Query 中， 媒體特性 min-width 和 max- width 對應的屬性值 就是響應式設計中的斷點值。 簡單點說， 就是使用主要斷點和次要斷點， 創建媒體查詢的條件。 而每個斷點會對應調用一個樣式文件（ 或者樣式代碼）， 主要斷點加載樣式文件將直接影響Web的 效果。 除了主要斷點之外， 為了滿足更多效果， 還可以在這個基礎上添加次要斷點。 不過主要斷點和次要斷點增加之后， 需要維護的樣式也相應地增加， 成本也相對應地增加。 因此在實際使用中， 需要根據自身產品需求， 決定斷點。 綜合下來， 設置斷點應把握以下三個要點。
    ·滿足主要的斷點；
    ·有可能的話添加一些別的斷點；
    ·設置高于1024px的桌面斷點。
    Responsive 布局技巧
    布局是一個再簡單不過的問題了， 也是每個網頁設計中必須包含的部分， 但使用 Responsive 設計第一步要做的事情是讓頁面布局盡量簡單。 實現一個簡單的布局有 一些小技巧。
    ·盡量少用無關緊要的div；
    ·不要使用內聯元素（ inline）；
    ·盡量少用JS或Flash；
    ·丟棄沒用的絕對定位和浮動樣式；
    ·摒棄任何冗余結構和不使用100%設置。 有舍才有得， 哪些東西 能幫助 Responsive 確定更好的布局呢？
    ·使用HTML5 Doctype和相關指南；
    ·重置好樣式（ reset. css）；
    ·一個簡單的有語義的核心布局；
    ·給重要的網頁元素使用簡單的技巧， 比如 導航 菜單 之類 元素。
    使用這些技巧， 無非是為了保持HTML簡單干凈， 而且在頁面布局中的關鍵部分（ 元素） 不要過分依賴現代技巧來實現， 比如說 CSS3 特效或者JS 腳本。 說了這么多， 怎么樣的布局或者說HTML 結構才是簡單干凈的呢？ 這里介紹一個快速測試的方法。 首先禁掉頁面中所有的樣式（ 以及與樣式相關的信息）， 在瀏覽器中打開， 如果內容排列有序， 方便閱讀， 那么這個結構就不會差到哪里去。
    meta標簽
    當Responsive設計頁面在智能設備中進行測試的時候（ 比如說iPhone或Android）， 會驚奇地發現， 所有的媒體查詢都不會生效—頁面仍展示為普通的樣式， 即一個全局縮小后的頁面。 這是因為 許多智能手機都使用了一個比實際屏幕尺寸大很多的虛擬可視區域， 主要目的就是讓頁面在智能手機端閱讀時不會因為實際可視區域而變形。 為了讓智能手機能根據媒體查詢匹配對應樣式， 讓頁面在 智能手機中正常顯示， 特意添加了一個特殊的meta標簽。 這個標簽的主要作用就是讓智能手機瀏覽網頁時能進行優化， 并且可以自定義界面可視區域的尺寸和縮放級別。 meta標簽使用方法如下：
    < meta name=" viewport" content="" /> 在content屬性中主要包括 (在資料的圖片中有)
    在實際項目中， 為了讓 Responsive 設計在智能設備中能正常顯示， 也就是瀏覽Web頁面時能適應屏幕的大小并顯示在屏幕上， 這可以通過這個可視區域的meta標簽進行重置， 告訴它使用設備的 寬度為視圖的寬度， 也就是說， 禁止其默認的自適應頁面的效果， 具體設置如下：
    < meta name=" viewport" content=" width= device- width, initial- scale= 1. 0" />
    另外， 由于Responsive設計 只有結合CSS3的Media Queries屬性， 才能盡顯 Responsive 設計風格， 故瀏覽器必須支持 CSS3 Media Queries。
    。。。。。。
    十六，嵌入Web字體
    一直以來Web設計師在設計網頁時都想為Web頁面添加一些優雅的字體，但瀏覽器僅限于使用用戶在其系統上安裝的字體呈現文本，這樣一來讓大部分網站受限于字體數量的不足。多年來一直都是 使用圖片替換文本的方式來解決頁面上使用優雅字體，但這種對于頻繁更換文本的網站來說是一件不切實際的事，以致于我們堅持使用這些少量的Web字體。隨著技術的不斷發展，出現在Web頁面中 使用Flash和JavaScript技術來彌補這一不足。雖然這些方法已經是不錯的應急措施， 允許包含自己的字體， 但是它們擁有很嚴重的缺陷。有時候它們很難實現， 因為它們要求用戶在本地啟用 JavaScript或者 Flash插件。值得慶幸的一件事情是， 可以使用@font-face模塊來解決Web頁面中使用優雅字體的方式。
    @font-face模塊介紹
    @font-face主要是把自己定義的Web字體嵌入到Web頁面中，這些自定義的字體被放置在服務器上，瀏覽器會根據指定的命令將對應的字體下載到本地緩存， 使用它來修飾文本。 也常常把這種方式 稱為Web字體嵌入（ 實際上并沒有什么字體被嵌入）。
    @font-face語法
    有了@font-face模塊， 只要將字體傳入到服務器端，不管用戶端是否安裝了對應的字體， 設計的網頁都能夠正確顯示，用較為專業的話來講，@font-face能夠加載服務器端的字體， 讓客戶端瀏覽器 顯示客戶端沒有安裝的字體。 如果沒有@font-face， 客戶端瀏覽器只能在客戶系統中尋找指定的字體， 這樣一來給設計師帶來極大的限制。@font-face能加載服務器端的字體，讓客戶端瀏覽器尋找 到對應的字體，使用中具有一套成熟的語法規則。
    @font- face { font- family:< YourWebFontName>;
    src: < source>[< format>][,< source>[< format>]]*;
    [font- weight:< weight>];
    [font- style:< style>]; }
    取值 說明 如下：
    ·YourWebFontName：指定的是自定義的字體名稱，最好是使用下載的默認字體文件名，它將被引用到Web元素中的font-family。如“ font- family:' YourWebFont- Name'”。
    ·Soure： 指定的是自定義的字體存放路徑， 可以是相對路徑也可以是絕對路徑。
    ·Format： 指定的是自定義的字體格式， 主要用來幫助瀏覽器識別，其值主要有以下幾種類型，如 truetype、 opentype、 truetype- aat、 embedded- opentype、 avg 等。
    ·font- weight 和 font- style： 前者用來指定字體是否為粗體，后者主要定義字體樣式，如 斜體。除了這兩個屬性之外， 類似的屬性還有 font- variant、 font- size、 font- stretch 等。
    使用字體圖標的優勢
    使用字體圖標和位圖， 它自身更具有哪些優勢呢？
    ·適用性： 一個圖標字體比一系列的圖像（ 特別是在Retina屏中使用雙倍大小的圖像） 要小。 一旦圖標字體加載了， 圖標就會馬上渲染出來， 不需要下載任何圖像。
    ·可擴展性： 圖標字體可以用過font-size屬性設置大小。 能夠隨時輸出不同大小的圖標，然而，使用位圖必須為每個不同大小的圖像輸出一個不同文件。
    ·靈活性： 文字效果可以很容易地應用到圖標上，包括顏色、陰影和翻轉等效果。它們還可以在任何背景下顯示
    ·兼容性： 網頁字體支持所有現代瀏覽器，包括低版本IE。
    實現@font-face
    @font-face屬性和CSS3中的@media，@import、@keyframes等屬性一樣， 都是用關鍵字符“@” 封裝多項規則。@font- face的"@"規則主要用于指定自定義字體， 然后在其他樣式塊中調用@ font-face中自定義的字體。
    使用@font-face自定義字體
    正常使用@font-face自定義字體， 必須滿足以下幾個關鍵點：
    ·將各種格式字體上傳到服務器上， 以支持各種瀏覽器； ·在@font-face中顯式指定自定義字體名稱以及引用自定義字體的字體來源。
    br/>·在@font-face中顯式指定自定義字體名稱以及引用自定義字體的字體來源。
    @font-face規則中的font-family與其他樣式中的font-fmaily略有不同。 在@font-face中的font-family只是聲明了字體的名稱（ 也就是自定義了字體的名稱），而沒有向元素中分配這種字體。而樣式 中的font-family卻是顯式地為元素指定字體名稱。在@font-face規則中 通過font-family來自定義字體名稱，而這個自體名稱可以是任意的名稱或形式，它僅用于元素樣式中的font-family屬性引用。 當然，使用的字體名稱最好與引用的字體文件名相同，用于保持CSS的可讀性，可維護性。上面通過@font-face聲明了字體名“ NeuesBauenDemo”，但并不會有任何實際效果，如果想讓Web中的 文本字體是 NeuesBauenDemo， 需要在樣式代碼塊中的對應元素中引用@font-face定義好的字體，@font-face和@keyframes一樣，一個@font-face規則僅自定義一個字體， 如果需要自定義多個 字體就需要對應啟用多個@font-face規則，
    聲明字體來源
    @font-face規則中有一個非常重要的參數，就是src，這個屬性類似于img標簽中的src屬性， 其值主要是用于鏈接到實際的字體文件。此外，可以聲明多個來源，如果客戶端的瀏覽器未能找到第一個 來源，它會依次嘗試尋找后面字體來源，直到找到一個可用的字體來源為止，
    每種字體都有其具體作用和格式，
66. TureType(. ttf) 格式 TureType(. ttf) 格式字體是 Windows 和 iOS 的最常見的字體， 是 一種RAW格式。
67. OpenType(. otf) 格式 OpenType(. otf) 格式字體被認為是一種原始的字體格式， 其內置在TureType的基礎上， 所以也提供更多的功能，
68. Web Open Font Format(. woff) 格式 Web Open Font Format(. woff) 格式字體是Web字體中最佳格式， 它是一個開放的 TrueType/ OpenType 的壓縮版本， 同時也支持元數據包的分離
69. Embedded Open Type(. eot) 格式 Embedded Open Type(. eot) 格式字體是 IE專用字體， 可以從 TrueType 中創建此格式字體
70. SVG(. svg) 格式SVG(. svg) 格式字體是基于SVG字體渲染的一種格式，
    這就意味著在@font-face中至少需要“. woff”和“. eot”兩種格式字體， 甚至還需要“. svg” 等字體以得到更多種瀏覽版本的支持。 為了使@font-face 得到更多的瀏覽器支持， Paul Irish 寫了 一個獨特的@font-face語法叫做“ Bulletproof@ font- face”(防彈字體)
    創建各種字體
    手上僅有一種格式的字體，而為了兼容瀏覽器各版本，需要從一種格式字體轉換成所需的各種字體格式。那么如何將字體轉換為所有格式的字體呢？
    這將成為@font-face定義字體之前首要解決的問題之一。目前為止，在互聯網上有很多在線轉換字體的生成工具。
    ·Fontsquirrel 字體轉換生成器
    ·Codeandmore 字體轉換生成器
    創建一個圖標字體
    Symbol(符號)字體可以使用一個專用的字體創建應用程序， 比如說 Glyphs(雕文)，但是一個專業的排版工具之外的需求或要求構建一個簡單的圖標字體，比如說 間 中 攻 粗細 這樣的物理關系并不是非常重要。 目前為止，最簡單的方法是使用Keyamoon制作的一個Web應用程序 IcoMoon，可以解決字符轉換成Web字體的所有麻煩。IcoMoon附帶了大量的圖標， 可以通過圖標庫添加更多的圖標，其中 大部分都可以免費使用（使用時請先查看它們的許可證）。如果你正在尋找如“ 文件下載”和“ 購物車” 一樣的圖標，那么你會發現， 使用標準的圖標比你自己創建要方便得多。
    準備插圖
    首先，需要能創建矢量圖標的程序，并且能夠找到輸出SVG格式，比如Illustrator或者iNkscape。 設計的時候，可以使用任何你喜歡的顏色，但是圖標必須是一個純色。確保每個圖標的尺寸大小是相同 的。若某一個圖標相較其他的更高或者更寬，會導致很難創建一個一致的字體。在這里，我們不得不減少飛艇圖標的寬度，以使它能匹配其他圖標
71. 清理圖標
    仔細檢查每一個圖標，以確保它們沒有缺陷—圖標在小尺寸的時候可能看著是完美的，當放大后會發現一些小的缺陷。在 Illustrator 中，使用Pathfinder工具統一層疊元素， 減去前面元素， 比如圖標 中的星星圖標。 原則是確保圖標是可讀的小尺寸，
72. 導成SVG文件
    現在，選擇一個圖標并將它復制粘貼到一個新的文檔場景中（ 如200px*200px）。會發現它有一個基線尺寸的設置。使用彩色的圖標，比如說在白色的背景中使用黑色的圖標。現在，選擇菜單“ 文件”中“ 保存”， 將選擇將文件保存成SVG文件格式。使用默認的SVG設置。一旦這樣做，所有的圖標可以創建為一個Web字體，
73. 導入到 IcoMoon
    打開 IcoMoon Web App 。導入一個圖標，點擊“ Import icons”按鈕，然后選擇想要添加的SVG文件— 可以一次添加多個文件。 這些圖標將會出現在“ Your Custom Icons” 區域中。 如果它們 是高亮的×××顯示，表示這些圖標是將要創建的圖標字體。
74. 從IcoMoon中導出字體
    想調整圖標的位置、大小或旋轉，可以點擊“ Edit” 按鈕， 使用“ Save Copy” 保存圖片（ 如鏡像圖標）。 然后添加一個有意義的圖標標記， 將用來生成類 名。 都準備好了， 點擊屏幕底部的“ Font” 按鈕開始生成字體。 這樣就可以指定圖標映射到字符上，例如， 設置一套六個旋轉的球， 可以給這六個球分別指定字符 q、 w、 e、 r、 t 和 y。 也可以根據自己的愛好選擇一個字體的名字。
    5.下載字體文件
    單擊“ Download”下載字體包到電腦上。它有一個文件夾包含了字體本身（ woff、 eot、 ttf 格式），以及一個HTML示例頁面和相應的CSS。甚至還有一個 JavaScript 文件和 一個解決方法，如果 需要支持IE或 IE7， 將font文件 復制到網 站， 為項目添加字體。 需要從 style. css 文件中復制 CSS 樣式， 并粘貼到自己網站的CSS文件中， 但是可以要將它重命名為 fonts. css， 并保持它作為一個 單獨 的 CSS 文件。 需要 的 時候 再把 這個 CSS 文件 引入 到 HTML 中。 < link rel=" stylesheet" href=" fonts. css" /> 在 CSS 文件 中 可以 找到@ font- face 需要 將 URL 路徑 修改 成 本地 的 相對路徑， 或者可以簡單地把字體文件和樣式放在同一個文件夾，
    調用字體樣式
    文件 index. html，有兩種方法可以調用，
    一種是通過字符（unicod 或 名稱），
    另一種是通過類名。首先，使用HTML5的自定義屬性data- icon。
    第二種方法
    使用 一個 span元素。 < span aria- hidden=" true"></ span> 如果想讓圖標具有鏈接功能， 可以將其放在一個鏈接中。< a href=" http:// www. w3cplus. com" data- icon="&# x73;"></ a> 這里，添加一個 iconlink類名， 并設置一個懸浮效果。
    。。。。。。
    十七，CSS3選擇器