學習要點：
1.css3 字首
2.長度單位 rem
主講教師：李炎恢
本章主要** html5 中 css 在發展中實行標準化的一些問題，重點** css3 中新屬性字首問題和新的單位 rem。
一．css3字首
在 css3 的很多新屬性推出時，這些屬性還處在不太穩定的階段，隨時可能被剔除。而此時的瀏覽器廠商為了實現這些屬性，採用字首方法。各大廠商字首列表如下：
瀏覽器
廠商字首
chrome、safari
-webkit-
opera
-o-firefox
-moz-
internet explorer
-ms-
我們之前學習過幾個 css3 的新屬性，比如：box-shadow、border-radius、opacity等。這幾個屬性我們在前面的使用中，並沒有新增所謂的瀏覽器廠商字首。那是因為，這些屬性已經在主流瀏覽器或版本成為了標準。具體進化步驟如下：
1.屬性尚未提出，這個屬性所有瀏覽器不可用；
2.屬性被提出，但未列入標準，瀏覽器廠商通過私有字首來支援該屬性；
3.屬性被列入標準，可以使用字首或不使用字首來實現屬性特性；
4.屬性不需要再使用字首，所有瀏覽器都穩定支援。
我們就拿 border-radius 舉例，它是 css3 的標準屬性。早期的時候處於實驗階段，尚未列入標準時，需要使用廠商字首。具體瀏覽器支援度如下：
屬性
瀏覽器
帶字首版本
不帶字首版本
標準/實驗
border-radius
ie不支援
9.0+
標準firefox
3.0 需帶-moz-
4.0+
safari
3.1 需帶-webkit-
5.1+
chrome
4.05.0+
opera
不支援10.5+
如果是手機等移動端一般採用的是 ios 或安卓系統，那麼基本上它的引擎是 webkit，直接參考-webkit-即可。
在 css3 手冊上，chrome 支援 border-radius 的版本為 13.0，而部分教材和文章上寫到只要 5.0。當然，這裡可能表達的含義可能不同。而截至到 2015 年 4 月份最新的 chrome 版本已經到 41.0 了，所以，不管是 5.0 還是 13.0 都是老古董了，沒必要深究。opera 支援 border-radius 版本為 11.5，而目前的版本是 28.0，也無傷大雅了。
而被列入標準的 box-shadow 和 opacity 基本與 border-radius 字首版本一致。
//因為目前處在標準階段，沒必要寫字首了
div
//實驗階段的寫法
div
實驗階段的寫法有三句，分別解釋一下：-webkit-表示 chrome 瀏覽器的私有屬性字首、-moz-表示 firefox 私有屬性字首，如果是處於實驗階段的舊版本瀏覽器，那麼不支援 border-radius，從而通過廠商字首的方式來支援。如果是新版瀏覽器，已經是處於標準階段，那麼又有兩種說法：1.如果新版瀏覽器廢棄了字首，那麼字首寫法就不支援了，僅支援標準寫法；2.如果新版瀏覽器沒有廢棄字首，那麼兩種寫法都可以，但要注意順序，且屬性值要保持一致。
如果同時出現四個字首+乙個標準寫法，四個字首是當實驗階段時讓四種引擎的瀏覽器廠商支援自己的私有屬性，乙個標準寫法表示當這個屬性列入標準後，使用新版瀏覽器執行時直接執行這個標準屬性。
//字首寫法寫在標準後面，且值不一樣，就會出現問題
div
特別注意：1.ie 的字首-ms-，和 opera 的字首-o-，在 border-radius 中不存在；2.現在的opera 瀏覽器也支援-webkit-字首，-webkit-border-radius 就能支援；3.safari for windows 已被蘋果公司在 2012 年放棄，遺留版本為 5.1.7。
最後說明：w3c 官方的立場表示實驗階段的屬性僅為了測試，未來有可能修改或刪除。而大量的開發者也認為在實際專案中不應該使用字首，而使用一種優雅降級保證一定的使用者體驗，而通過漸進增減的方式讓新版高階瀏覽器保證最高的效果。
二．長度單位rem
css3 引入了一些新的尺寸單位，這裡重點推薦乙個：rem 或者成為(根 em)。目前主流的現代瀏覽器都很穩定的支援。它和 em、百分比不同的是，它不是與父元素掛鉤，而是相對於根元素的文字大小來計算的，這樣能更好的統一整體頁面的風格。
//首先，來一段 html
<h1>標題<
em>小標題
em>
h1>
<
p>
我是乙個段落，我是一段
<
code
>**
code
>
p>
//其次來一段 css
html h1 p
這裡做幾個解釋，我們在之前的 web 設計中大量使用了 px 單位進行布局。因為，早期的固定布局使用 px 較為方便，逐漸養成了這種習慣。而使用 em 單位其實更加靈活，尤其是在修改樣式時，只需要修改一下掛鉤元素的那個大小即可，無須每個元素乙個個修改。
但就算是 em，還是有一定問題。網頁預設的字型大小大小為 16px，然後通過設定62.5%，將網頁基準設定為 10px。而設定為 3em，就是自身大小的 3 倍；設定為1.4em，就是 10px 的 1.4 倍，即 14px。
現在問題來了，裡面的文字想設定 11px，怎麼辦呢？設定 1.1em 嗎？不對，因為它掛鉤的父元素不是而是變成了 14px 的 1.1 倍了，而想設定 11px，則需要設定 0.786 倍才行。但是，這樣的計算量太大了。所以，w3c 推出了直接基於根元素單位：rem。
//直接基於的單位
code
瀏覽器
rem 單位
opera
11.6+
firefox
3.6+
safari
5.0+
chrome
6.0+
ie9.0+
《CSS3秘籍》第6 7章
第六章 文字格式化 1 字型 1 serif字型 適用於冗長的文字資訊，包括 times times new roman georgia 2 sans serif字型 適用於標題，包括 arial helvetica verdana 3 monospaced字型 適用於計算機 字型中每個字母都是等寬...
第1章 初識CSS3
css3是css2的公升級版本，3只是版本號，它在css2.1的基礎上增加了很多強大的新功能。目前主流瀏覽器chrome safari firefox opera 甚至360都已經支援了css3大部分功能了，ie10以後也開始全面支援css3了。在編寫css3樣式時，不同的瀏覽器可能需要不同的字首。...
第 22 章 CSS3 漸變效果
學習要點 1.線性漸變 2.徑向漸變 主講教師 李炎恢 本章主要 html5 中 css3 背景漸變功能，主要有兩種漸變方式 線性漸變和徑向 放射性 漸變。一 線性漸變 linear gradient 方位,起始色,末尾色 方位可選引數，漸變的方位。可以使用的值有 to top to top rig...