<p>簡單地說，css3是css2的一個升級版践啄，它并沒有采用總體結(jié)構(gòu)浇雹，而是采用了分工協(xié)作的模塊化結(jié)構(gòu)。<p>
相關(guān)參考手冊鏈接：
兼容性問題
通過 http://caniuse.com/ 可查詢CSS3各特性的支持程度屿讽，一般兼容性處理的常見方法是為屬性添加私有前綴箫爷，如不能解決，應(yīng)避免使用聂儒，無需刻意去處理CSS3的兼容性問題虎锚。
常用的私有前綴
- 谷歌 、蘋果： -webkit-
- ie： -ms-
- 火狐：-moz-
- 歐朋：-o-
選擇器：#
屬性選擇器：
- E[title] 選中帶有title屬性的E標簽
- E[title="box" ] 選中帶有title屬性的E標簽,并且值為box
- E[title^="box"] 選中帶有title屬性的E標簽,并且值以box開始
- E[title$="box"] 選中帶有title屬性的E標簽,并且值以box結(jié)尾
- E[title*="box"] 選中帶有title屬性的E標簽,并且值包含box
偽類選擇器：（通過結(jié)構(gòu)進行篩選）#
- E:first-child 選中父盒子中的第一個子元素
- E:last-child 選中父盒子中的最后一個子元素
- E:nth-child(n) 選中父盒子中的第N個子元素
- E:nth-last-child(n) 從后向前選中第n個
- E:nth-of-type(n) 匹配同類型中的第n個同級兄弟元素E
- E:nth-last-of-type(n) 匹配同類型中的倒數(shù)第n個同級兄弟元素E
E:only-child(n) 匹配父元素僅有的一個子元素E
其他偽類：#
- E:empty 選中內(nèi)容為空的E元素
- E:not('.box'); 排除 類名的為box的E元素
- E:target 表示E元素被激活是的狀態(tài) 衩婚，配合錨點使用
偽元素選擇器：#
- ::first-line 第一行
- ::first-letter 第一字母
- ::selection 表示選中的區(qū)域 （背景顏色和字體顏色）
漸變：
linear-gradient 線性
radial-gradient 中心向外
例： background:radial-gradient(30px at 50px 50px,yellow,pink);
例：background-image: linear-gradient(135deg, red 0%,red 25%,blue 25%, blue 50%, green 50%, green 75%,pink 75%, pink 100% );
顏色：
1窜护、opacity只能針對整個盒子設(shè)置透明度，子盒子及內(nèi)容會繼承父盒子的透明度非春；
2 柱徙、transparent 不可調(diào)節(jié)透明度缓屠，始終完全透明
3， RGBA
- Red护侮、Green敌完、Blue、Alpha即RGBA
- R羊初、G滨溉、B 取值范圍0~255
- A：不具有繼承性，即不會影響子元素的透明度
4长赞，HSLA - h：色調(diào) 0-360
- s:飽和度 0-100%
- l:亮度 0-100%
- a:alpha 0-1
陰影：
- 例：box-shadow: 5px 5px 5px #CCC
- 例：text-shadow：2px 2px 2px #ddd;
background-origin 參考原點
- border-box 以邊框做為參考原點晦攒；
- padding-box 以內(nèi)邊距做為參考原點；
- content-box 以內(nèi)容區(qū)做為參考點得哆；
剪切：
- background-clip脯颜，可以設(shè)置對背景區(qū)域進行裁切，即改變背景區(qū)域的大小
過度：
- transition-property 設(shè)置過渡屬性
- transition-duration 設(shè)置過渡時間
- transition-timing-function 設(shè)置過渡速度
- transition-delay 設(shè)置過渡延時
transform變換：
記得要和transition一起使用才有動畫效果
縮放scale(x, y)
.a{
width: 500px;
height: 200px;
background-image: linear-gradient(135deg, pink,green);
transition: all 2s;
}
.a:hover{
transform: scale(1.2,0.5);
}
移動translate(x, y)
transform:translate(300px,-50%);
旋轉(zhuǎn)rotate(deg)
transform: rotate(-50deg);
透視（perspective）【3d】
要給要設(shè)置透視的盒子的父盒子加 perspective :200px;
再給本身設(shè)置旋轉(zhuǎn)角度方向 transform:rotateY(52deg);
3D變換：
- 讓子盒子保持真正的3d效果贩据，需要給父盒子設(shè)置屬性栋操；
transform-style:preserve-3d; - 關(guān)于3d旋轉(zhuǎn)方向的問題：對著正方向去看：都是順時針旋轉(zhuǎn)的；
- 3d變換屬性：
rotateX： 沿著x軸旋轉(zhuǎn)
rotateY: 沿著y軸旋轉(zhuǎn)
rotateZ: 沿著Z軸旋轉(zhuǎn)
translateX: 沿著x軸移動
translateY: 沿著y軸移動
translateZ: 沿著Z軸移動 必須配合透視使用
動畫：
- 必要元素：
a饱亮、通過@keyframes指定動畫序列矾芙；
b、通過百分比將動畫序列分割成多個節(jié)點近尚；
c蠕啄、在各節(jié)點中分別定義各屬性
d、通過animation將動畫應(yīng)用于相應(yīng)元素戈锻；
@keyframes gun{
0%{
transform: rotateX(720deg) rotateY(0deg) rotateZ(0deg);
}
50%{
transform: rotateX(720deg) rotateY(720deg) rotateZ(720deg);
}
100%{
transform: rotateY(720deg) rotateZ(0deg) rotateX(0deg);
}
}
伸縮布局：
CSS3在布局方面做了非常大的改進歼跟，使得我們對塊級元素的布局排列變得十分靈活，適應(yīng)性非常強格遭，其強大的伸縮性哈街，在響應(yīng)式開中可以發(fā)揮極大的作用。
方向：默認主軸從左向右拒迅，側(cè)軸默認從上到下
等分寬度或高度##
- 先給父盒子設(shè)置
display: flex;
再給子盒子設(shè)置flex: 多少等分; - 在父盒子設(shè)置
從左到右
flex-direction: row;
從右到左
flex-direction: row-reverse;
從上到下
flex-direction: column;
從下到上
flex-direction: column-reverse;
不設(shè)置等分時
- justify-content:主軸對齊方式
flex-start:從主軸開始的方向?qū)R
flex-end:從主軸結(jié)束的方向?qū)R
center ：居中
space-around: 在主軸方向上平分主軸的空間
space-between: 在主軸方向上兩端對齊 - align-itmes: 側(cè)軸上對齊方式
flex-start:從側(cè)軸開始的方向?qū)R
flex-end:從側(cè)軸結(jié)束的方向?qū)R
center ：居中對齊
stretch:拉伸 （ 拉伸子盒子 ）
是否換行##
- 換行
flex-wrap：wrap骚秦； - 不換行
flex-wrap：nowrap；（默認寬高會被壓縮璧微，都顯示在同一行）
給父盒子設(shè)置的作箍，要在子盒子寬高之和大于父盒子的寬高是才有效果
字體圖標
常見的是把網(wǎng)頁常用的一些小的圖標，借助工具幫我們生成一個字體包前硫，然后就可以像使用文字一樣使用圖標了
優(yōu)點
1胞得、將所有圖標打包成字體庫，減少請求屹电；
2阶剑、具有矢量性跃巡，可保證清晰度；
3牧愁、使用靈活素邪，便于維護；
Font Awesome 使用介紹 http://fontawesome.dashgame.com/
定制自已的字體圖標庫
http://iconfont.cn/
https://icomoon.io/
SVG素材 http://www.iconsvg.com/
