什麼是CSS3？
CSS3是CSS2的升級版本，3只是版本號，它在CSS2.1的基礎上增長了不少強大的新功能。 目前主流瀏覽器chrome、safari、firefox、opera、甚至360都已經支持了CSS3大部分功能了，IE10之後也開始全面支持CSS3了。css
在編寫CSS3樣式時，不一樣的瀏覽器可能須要不一樣的前綴。它表示該CSS屬性或規則還沒有成爲W3C標準的一部分，是瀏覽器的私有屬性，雖然目前較新版本的瀏覽器都是不須要前綴的，但爲了更好的向前兼容前綴仍是少不了的。前端
| 前綴web |
瀏覽器chrome |
| -webkit瀏覽器 |
chrome和safari服務器 |
| -moz工具 |
firefox字體 |
| -ms動畫 |
IEui |
| -o |
opera |
CSS3能作什麼？
CSS3把不少之前須要使用圖片和腳原本實現的效果、甚至動畫效果，只須要短短几行代碼就能搞定。好比圓角，圖片邊框，文字陰影和盒陰影，過渡、動畫等。
CSS3簡化了前端開發工做人員的設計過程，加快頁面載入速度。
圓角效果 border-radius
border-radius是向元素添加圓角邊框。
使用方法：
border-radius:10px; /* 全部角都使用半徑爲10px的圓角 */
border-radius: 5px 4px 3px 2px; /* 四個半徑值分別是左上角、右上角、右下角和左下角，順時針 */
不要覺得border-radius的值只能用px單位，你還能夠用百分比或者em，但兼容性目前還不太好。
實心上半圓：
方法：把高度(height)設爲寬度（width）的一半，而且只設置左上角和右上角的半徑與元素的高度一致（大於也是能夠的）。
div{
height:50px;/*是width的一半*/
width:100px;
background:#9da;
border-radius:50px 50px 0 0;/*半徑至少設置爲height的值*/
}
實心圓：
方法：把寬度（width）與高度(height)值設置爲一致（也就是正方形），而且四個圓角值都設置爲它們值的一半。以下代碼：
div{
height:100px;/*與width設置一致*/
width:100px;
background:#9da;
border-radius:50px;/*四個圓角值都設置爲寬度或高度值的一半*/
}
陰影 box-shadow（一）
box-shadow: X軸偏移量 Y軸偏移量 [陰影模糊半徑] [陰影擴展半徑] [陰影顏色] [投影方式];
注意：inset 能夠寫在參數的第一個或最後一個，其它位置是無效的。
tip : x軸y軸偏移量爲正：x : 右，y：下 ；x軸y軸偏移量爲負：x : 坐，y：上 ；
總結：左負右正，上負下正
爲元素設置外陰影：
示例代碼：
1 .box_shadow{
2 box-shadow:4px 2px 6px #333333;
3 }
效果：
爲元素設置內陰影：
示例代碼：
.box_shadow{
box-shadow:4px 2px 6px #333333 inset;
}
效果：
添加多個陰影：
以上的語法的介紹，就這麼簡單，若是添加多個陰影，只需用逗號隔開便可。如：
.box_shadow{
box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset;
}
效果：
陰影 box-shadow（二）
一、陰影模糊半徑與陰影擴展半徑的區別
陰影模糊半徑：此參數可選，其值只能是爲正值，若是其值爲0時，表示陰影不具備模糊效果，其值越大陰影的邊緣就越模糊；
陰影擴展半徑：此參數可選，其值能夠是正負值，若是值爲正，則整個陰影都延展擴大，反之值爲負值時，則縮小；
二、X軸偏移量和Y軸偏移量值能夠設置爲負數
box-shadow: X軸偏移量 Y軸偏移量 [陰影模糊半徑] [陰影擴展半徑] [陰影顏色] [投影方式];
X軸偏移量爲負數：
.boxshadow-outset{
width:100px;
height:100px;
box-shadow:-4px 4px 6px #666;
}
效果圖：
Y軸偏移量爲負數：
.boxshadow-outset{
width:100px;
height:100px;
box-shadow:4px -4px 6px #666;
}
效果圖：
爲邊框應用圖片 border-image
顧名思義就是爲邊框應用背景圖片，它和咱們經常使用的background屬性比較類似。例如：
background:url(xx.jpg) 10px 20px no-repeat;
可是又比背景圖片複雜一些。
想象一下：一個矩形，有四個邊框。若是應用了邊框圖片，圖片該怎麼分佈呢？ 圖片會自動被切割分紅四等分。用於四個邊框。
能夠理解爲它是一個切片工具，會自動把用作邊框的圖片切割。怎麼切割呢？爲了方便理解，作了一張特殊的圖片，由9個矩形（70*70像素）拼成的一張圖（210*210像素），並標註好序號，是否是像傳說中的九宮圖，以下：
咱們把上圖看成邊框圖片 來應用一下， 看一看是什麼效果
根據border-image的語法：
#border-image{
background:#F4FFFA;
width:210px; height:210px; border:70px solid #ddd;
border-image:url(borderimg.png) 70 repeat
}
效果：
從序號能夠看出div的四個角分別對應了背景圖片的四個角。而2,4,6,8 被重複。5在哪？由於是從四周向中心切割圖片的因此，5顯示不出來。而在chrome瀏覽器中5是存在的，下圖的樣子：
repeat的意思就是重複，目前由於是恰好被整除，效果看不出來。若是改下DIV的寬高，再來看重複的效果：
邊角部分爲裁掉了，可見repeat就是一直重複，而後超出部分剪裁掉，並且是居中開始重複。
Round 參數：Round能夠理解爲圓滿的鋪滿。爲了實現圓滿因此會壓縮（或拉伸）；
#border-image {
width:170px;
height:170px;
border:70px solid;
border-image:url(borderimg.png) 70 round;
}
效果：
可見圖片被壓扁了。
Stretch 很好理解就是拉伸，有多長拉多長。有多遠「滾」多遠。
border-image:url(borderimg.png) 70 stretch;
看一下效果：
2,4,6,8分別被拉伸顯示。
注意：Chrome下，中間部分也會被拉伸，webkit瀏覽器對於round屬性和repeat屬性彷佛沒有區分，顯示效果是同樣的。
Firefox 26.0 下是能夠準確區分的。
顏色之RGBA
RGB是一種色彩標準，是由紅(R)、綠(G)、藍(B)的變化以及相互疊加來獲得各式各樣的顏色。RGBA是在RGB的基礎上增長了控制alpha透明度的參數。
語法：
color：rgba(R,G,B,A)
以上R、G、B三個參數，正整數值的取值範圍爲：0 - 255。百分數值的取值範圍爲：0.0% - 100.0%。超出範圍的數值將被截至其最接近的取值極限。並不是全部瀏覽器都支持使用百分數值。A爲透明度參數，取值在0~1之間，不可爲負值。
代碼示例：
background-color:rgba(100,120,60,0.5);
漸變色彩
CSS3 Gradient 分爲線性漸變(linear)和徑向漸變(radial)。因爲不一樣的渲染引擎實現漸變的語法不一樣，這裏咱們只針對線性漸變的 W3C 標準語法來分析其用法，其他你們能夠查閱相關資料。W3C 語法已經獲得了 IE10+、Firefox19.0+、Chrome26.0+ 和 Opera12.1+等瀏覽器的支持。
這一小節咱們來講一下線性漸變：
參數：
第一個參數:指定漸變方向，能夠用「角度」的關鍵詞或「英文」來表示：
（單擊圖片可放大）
第一個參數省略時，默認爲「180deg」，等同於「to bottom」。
第二個和第三個參數，表示顏色的起始點和結束點，能夠有多個顏色值。
background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);
效果圖：
text-overflow 與 word-wrap
text-overflow用來設置是否使用一個省略標記（...）標示對象內文本的溢出。
語法：
可是text-overflow只是用來講明文字溢出時用什麼方式顯示，要實現溢出時產生省略號的效果，還須定義強制文本在一行內顯示（white-space:nowrap）及溢出內容爲隱藏（overflow:hidden），只有這樣才能實現溢出文本顯示省略號的效果，代碼以下：
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
同時，word-wrap也能夠用來設置文本行爲，當前行超過指定容器的邊界時是否斷開轉行。
語法：
normal爲瀏覽器默認值，break-word設置在長單詞或 URL地址內部進行換行，此屬性不經常使用，用瀏覽器默認值便可。
嵌入字體@font-face
@font-face可以加載服務器端的字體文件，讓瀏覽器端能夠顯示用戶電腦裏沒有安裝的字體。
語法：
@font-face {
font-family : 字體名稱;
src : 字體文件在服務器上的相對或絕對路徑;
}
這樣設置以後，就能夠像使用普通字體同樣在（font-*）中設置字體樣式。
好比：
p {
font-size :12px;
font-family : "My Font";
/*必須項，設置@font-face中font-family一樣的值*/
}
文本陰影text-shadow
text-shadow能夠用來設置文本的陰影效果。
語法：
text-shadow: X-Offset Y-Offset blur color;
X-Offset：表示陰影的水平偏移距離，其值爲正值時陰影向右偏移，反之向左偏移；
Y-Offset：是指陰影的垂直偏移距離，若是其值是正值時，陰影向下偏移，反之向上偏移；(左負又正 上負下正)
Blur：是指陰影的模糊程度，其值不能是負值，若是值越大，陰影越模糊，反之陰影越清晰，若是不須要陰影模糊能夠將Blur值設置爲0；
Color：是指陰影的顏色，其可使用rgba色。
好比，咱們能夠用下面代碼實現設置陰影效果。
text-shadow: 0 1px 1px #fff
background-origin
設置元素背景圖片的原始起始位置。
語法：
background-origin ： border-box | padding-box | content-box;
參數分別表示背景圖片是從邊框，仍是內邊距（默認值），或者是內容區域開始顯示。
效果以下：
須要注意的是，若是背景不是no-repeat，這個屬性無效，它會從邊框開始顯示。
background-clip
用來將背景圖片作適當的裁剪以適應實際須要。
語法：
background-clip ： border-box | padding-box | content-box | no-clip
參數分別表示從邊框、或內填充，或者內容區域向外裁剪背景。no-clip表示不裁切，和參數border-box顯示一樣的效果。backgroud-clip默認值爲border-box。
效果以下圖所示：
background-size
設置背景圖片的大小，以長度值或百分比顯示，還能夠經過cover和contain來對圖片進行伸縮。
語法：
background-size: auto | <長度值> | <百分比> | cover | contain
取值說明：
一、auto：默認值，不改變背景圖片的原始高度和寬度；
二、<長度值>：成對出現如200px 50px，將背景圖片寬高依次設置爲前面兩個值，當設置一個值時，將其做爲圖片寬度值來等比縮放；
三、<百分比>：0％~100％之間的任何值，將背景圖片寬高依次設置爲所在元素寬高乘之前面百分比得出的數值，當設置一個值時同上；
四、cover：顧名思義爲覆蓋，即將背景圖片等比縮放以填滿整個容器；
五、contain：容納，即將背景圖片等比縮放至某一邊緊貼容器邊緣爲止。
multiple backgrounds
多重背景，也就是CSS2裏background的屬性外加origin、clip和size組成的新background的屢次疊加，縮寫時爲用逗號隔開的每組值；用分解寫法時，若是有多個背景圖片，而其餘屬性只有一個（例如background-repeat只有一個），代表全部背景圖片應用該屬性值。
語法縮寫以下：
background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...
能夠把上面的縮寫拆解成如下形式：
background-image:url1,url2,...,urlN;
background-repeat : repeat1,repeat2,...,repeatN;
backround-position : position1,position2,...,positionN;
background-size : size1,size2,...,sizeN;
background-attachment : attachment1,attachment2,...,attachmentN;
background-clip : clip1,clip2,...,clipN;
background-origin : origin1,origin2,...,originN;
background-color : color;
注意：
- 用逗號隔開每組 background 的縮寫值；
- 若是有 size 值，須要緊跟 position 而且用 "/" 隔開；
- 若是有多個背景圖片，而其餘屬性只有一個（例如 background-repeat 只有一個），代表全部背景圖片應用該屬性值。
- background-color 只能設置一個。
舉例：
.demo{
width: 300px;
height: 140px;
border: 1px solid #999;
background-image: url(http://img.mukewang.com/54cf2365000140e600740095.jpg),
url(http://img.mukewang.com/54cf238a0001728d00740095.jpg),
url(http://img.mukewang.com/54cf23b60001fd9700740096.jpg);
background-position: left top, 100px 0, 200px 0;
background-repeat: no-repeat, no-repeat, no-repeat;
margin:0 0 20px 0;
}
練習：
/*製做圓*/
border-radius:8px;
/*製做導航立體風格*/
box-shadow:0 5px rgb(184,78,68);
/*使用僞元素製做導航列表項分隔線*/
.nav li{
background:linear-gradient(to bottom,#dd2926,#a82724,#dd2926) no-repeat right / 1px 15px;
}
/*刪除第一項和最後一項導航分隔線*/
.nav li:last-child{
background:none;
}
