從零單排之CSS3

CSS3 概覽

CSS3大法好

今夜秋風陣陣，霧霾層層。不由讓人想做詩，不過考慮到本身才華實在有限的有點有限，就不丟人了，只作一首就行了。

CSS3大法真是好， 前端羣衆學到老。
圓角陰影好旋轉， 移動扭曲加縮放。
顏色漸變和背景， 僞類動畫跑不了。
佈局選擇多媒體， 字體響應就是屌。

CSS3提及來條目繁多，乍看之下與以前CSS2比起來複雜了好多。其實多出的部分主要歸結爲兩點：
1.是各瀏覽器廠商的前綴（-webkit, -moz, -o）
2.則是CSS3新增的動畫，因爲是新增的，因此看着陌生。
第一點和第二點結合起來就會致使css的代碼看起來老長老長。
因此若是你弄清這一點的話，應該對於CSS3就不會顯得那麼頭大了。

CSS3 簡介

簡介就是簡單介紹，那麼下面讓我以《CSS3大法好》來和你們簡單介紹一下CSS3， 但願能幫助你們更好的去學習CSS3。
圓角指的即便border-radius, 通常正式的寫法爲：

div {
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
         -o-border-radius: 3px;
            border-radius: 3px;
}

效果請看sf任意一個按鈕便可
寫到此處不由跟你們說，CSS3最好仍是配合CSS預編譯來寫。可選的有LESS，SASS，Stylus(這個沒接觸過) 額外插一句最近看SASS，發現SASS優於LESS最明顯一點是SASS有compass，而LESS毛都木有。跑題了...
言歸正傳，其實CSS3不只帶來了圓角，同時也帶來了border-image,看屬性名你們應該知道是什麼意思了。
陰影其實能夠分爲兩部分看text-shadow和box-shadow，不過雖然兩個都是dow，可是待遇還是不那麼同樣，首先不一樣一點就是兩個屬性的值不一樣：

div {
    box-shadow: none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]
    (內陰影) x軸偏移， y軸偏移，(模糊)， 顏色
    text-shadow: none | [<shadow>,]* <shadow>where <shadow> is: [ <color>? <offset-x> <offset-y> <blur-radius>? | <offset-x> <offset-y> <blur-radius>? <color>? ]
    顏色，x軸偏移，y軸偏移，(模糊) 或者 x軸偏移，y軸偏移，(模糊)，顏色
    //舉個例子
    box-shadow: 4px 4px 5px #f00;
    text-shadow: #f00 4px 4px 5px;
}

而後text-shadow是IE10， box-shadow是IE9。
隨便寫寫竟然這麼多了， 其餘的放在第二期吧。
(PS: 你們以爲我有必要寫一些demo嗎，直接放在github上面給你們參考？)