css3(愛前端)
一 css 概述
1.1 歷史
CSS3 是 層疊樣式表(Cascading Style Sheets) 語言的最新進展，目的在於擴展 CSS2.1。
它為我們帶來了許多期待已久的新特性， 例如圓角，陰影，gradients(漸變)，
transitions (過渡) 或 animations(動畫) ， 當然還有新的布局如 multi-columns ， flexible box 或 grid layouts。
CSS3 為什麽能發展這麽快，百花齊放，源於CSS從創立之初就有一個規定，
就是遇見不認識的選擇器、屬性，靜默不報錯，不影響後面能夠識別的語句
1.2 兼容性
CSS3和HTML5一起的兼容性，有一個網站打分
哆啦A夢CSS3測試：
http://www1.pconline.com.cn/pcedu/specialtopic/css3-doraemon/
二 css 選擇器
交集選擇器： div.red
並集選擇器： div, p
>, +, ,屬性選擇器 IE7開始兼容
序 選擇器 ie9 開始兼容
jQuery中，借用了這幾個符號 > 、 + 、 ~ 都能夠用於 $() 函數中，都是 IE6 也兼容的
實踐總結：
class 只有 aa 才能選中
class 只有 aa，或者 xxx aa 都能選中
class 只有 =‘aa‘ 或者 =’aa-x‘ 才能選中 aa 要在 = 後面
E:enabled 匹配用戶界面上處於可用狀態的元素E
E:empty 當一個標簽是完全首尾相接，沒有任何的空格、tab、換行、文字，就是:empty
E:target 實例跳轉
a 標簽： 
目標區塊： 
css:
偽元素：
content 表示內容，所有的 ::before 必須有 content 屬性，否則語法錯誤。
如果沒有 content，那麽也要寫 content:””。
註意 ::before 、::after 都是行內元素，必須轉塊或者脫標才能設置寬度高度
after 可以用來清除浮動
IE8 不兼容 ::after，但是兼容 :after。所以為了更大的兼容，寫成:after即可
三 css3 新特性
3.1 圓角邊框
border-radius 屬性，值可以是一個 px 為單位的數值，也可以是%為單位的百分比數值
ie9 開始兼容， 四個值順序 : 上右下左
3.2 box-shadow ie9 開始兼容
標準是 5 個參數： 向右的偏移值、向下的偏移值、模糊半徑、延展寬度、顏色
可省略參數：
一個盒子可以有多個陰影 ，用，逗號隔開：
通過寫 inset，表示內陰影，內陰影也可以有多個
3.3 text-shadow
text-shadow 是文字陰影，只有四個參數，少了延展值，IE10 開始兼容
3.4 background 系列
3.4.1 漸變 background-image IE9開始兼容
私有前綴：瀏覽器廠商把一些還處於實驗性質的css屬性，都加上了自己的前綴。
chrome 的是 -webkit-
火狐是 -moz-
IE是 -ms-
歐朋是 -o-
參數：
第一個參數： 用方向 top, left, bottom, right 或者 xxxde
角度問題：
w3c ：豎直向是 0，水平向右 90deg , 順時針方向
加前綴：水平向右 90 deg, 豎直向上 0 deg, 逆時針方向
可以羅列無數個顏色值，用逗號隔開：
background-image: -webkit-linear-gradient(top,red,orange,yellow,green,blue,purple);
可以用百分比描述這種顏色從何處開始：
background-image: -webkit-linear-gradient(top,red,blue 30%,green 70%); 也可用 單位 px
徑向漸變：
background-image: -webkit-radial-gradient(100px 100px , blue , white);
3.4.2 background-origin 背景起源
background-origin: padding-box | border-box | content-box;
background-origin 屬性規定 background-position 屬性相對於什麽位置來定位
3.4.3 background-clip
background-clip: border-box(默認值) | padding-box | content-box;
背景圖的位置不變( background-orign 不變)，會被裁剪顯示， 到邊框 、 padding, content 顯示
3.4.4 background-size 規定背景圖像的尺寸
background-size: length | percentage | cover | contain;
如果只想設置一個值，另外一個值自動按比例計算，那麽就寫 auto
background-size: 200px auto;
3.5 多背景
一個盒子可以同時攜帶多個背景了，用逗號隔開。IE9兼容
但是，同一個盒子只能攜帶一個背景色，可以攜帶多個背景圖
background-position、background-size 等等屬性都能用逗號隔開數值了，表示對不同的圖片來設置值
4 過濾
transition 屬性，就是過渡。讓某一個元素從CSS狀態A變為CSS狀態B的時候不是幹蹦，而是動畫。
制作動畫，不需要使用 setInterval了，可以使用CSS3的transition屬性來制作動畫。
transition屬性使用的是瀏覽器內核中的 C++ 代碼來實現的，效率要比setInterval高的多的多。
動畫的平滑程度、細膩程度，要比 setInterval 牛逼很多。
4.1 語法 ：
transition: all 1s ease 0s;
第1個參數： 就是想讓什麽屬性參與過渡，如果想讓所有屬性參與過渡，寫all
第2個參數： 就是過渡動畫的時間，s表示秒，一定要寫s，不要不寫單位，也不要些別的；
第3個參數： 緩沖描述詞，ease表示不勻速，勻速就是linear。
第4個參數： 延遲時間，0s就是不延遲。
貝塞爾曲線
transition: all 2s cubic-bezier(.29,1.05,.78,.07) 0s;
4.2 什麽屬性能過渡
基本所有屬性都能過渡：
background-color、background-position、background-image、border-radius、border、padding、font-size等等。
不能過渡的：
漸變色、float
尤其要註意的是，jQuery中的 animate 函數，不支持 background-color、background-position。
所以，如果想要制作 背景顏色、背景定位的動畫，必須使用CSS3。
4.3 什麽時候觸發過渡
任何對元素的CSS改變都能觸發過渡。
不要認為只有 :hover 能夠觸發過渡。任何造成元素的改變，都會引發過渡。
比如元素的類名改變，能夠觸發過渡。
比如直接用 JS 來設置屬性，也能夠觸發過渡。
實例：
View Code
過渡例子：
css3(愛前端)