HTML是骨架，CSS是裝飾谨究，CSS使得網(wǎng)頁(yè)豐富多彩恩袱，它也是Web開(kāi)發(fā)不可或缺的一部分。
同HTML5一樣胶哲，CSS3也存在兼容性問(wèn)題畔塔，不同瀏覽器支持情況不同，甚至鸯屿，特定的瀏覽器指定了特定CSS屬性澈吨。
下表是針對(duì)不同瀏覽器需要的特殊前綴：
| 前綴 | 瀏覽器 |
|---|---|
| -moz- | Firefox |
| -webkit- | Chrome, Safari |
| -ms- | Internet Explorer |
| -o- | Opera |
CSS3新特性分為兩大類，一是支持了新的選擇器寄摆，比如偽類:last-child谅辣，:first-child等等；二是頁(yè)面渲染方面的新功能婶恼。
本文只介紹第二類中比較重要的新特性桑阶。
1. Web字體@font-face
CSS3支持自定義字體，只需要在項(xiàng)目中導(dǎo)入字體文件或者文件鏈接url（常用的有.woff勾邦，.svg蚣录，eot等格式），樣式文件中用@font-face定義字體名检痰，字體文件路徑等等包归。之后，可以在font-familiy屬性中使用自定義字體名铅歼。
例如，我們?cè)陧?xiàng)目中使用google font：
// 定義字體
@font-face {
font-family: 'BadScript';
font-style: normal;
font-weight: 400;
src: local('Bad Script Regular'), local('BadScript-Regular'),
url(../font/googlefonts/rL_b2ND61EQmMOJ8CRr1fhsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}
// 使用字體
.BadScript {
font-family: 'BadScript', Georgia, "Times New Roman", Times, serif;
}
2. 多欄文本
支持多欄文本有的CSS3屬性有：
-
column-count設(shè)置欄數(shù) -
column-width設(shè)置每欄的寬度
3. 媒體查詢media
媒體查詢media可以取得設(shè)備關(guān)鍵信息换可，如大小椎椰，分辨率等等，根據(jù)這些信息應(yīng)用不同樣式沾鳄。
(1)定義樣式表外部鏈接時(shí)使用
<head>
<!-- 屏幕顯示中使用樣式style.css -->
<link media = "screen" href="style.css" />
<!-- 打印頁(yè)面中使用樣式print.css -->
<link media = "print" href="print.css" />
<!-- 在480像素設(shè)備且是豎屏情況下應(yīng)用phone.css -->
<link media = "(max-device-width:480px) and (orientation:portrait)" href="phone.css" />
</head>
(2) CSS樣式表中使用
/*窗口寬度介于600像素到700像素直接慨飘，使用該樣式*/
@media (min-width: 600px) and (max-width: 700px) { ... }
/*窗口寬度小于400像素使用該樣式*/
@media (min-width: 400px) { ... }
4.透明度 opacity
注意，opacity值是小數(shù)译荞。
使用opacity給元素設(shè)置透明度瓤的，會(huì)將背景顏色，文本顏色和邊框顏色都變透明吞歼。如果只想設(shè)置其中一種類型的透明度圈膏，可以使用函數(shù)ragb(val1, val2, val3, opacity)。
5. 圓角 border-radius
支持矩形圓角篙骡，可以給一個(gè)盒子設(shè)置四個(gè)弧度不同的圓角稽坤。
roundBox {
border-top-left-radius: 150px 30px; /* 圓弧 */
border-top-right-radius: 150px 60px;
border-bottom-left-radius: 150px; /* 半圓弧 */
border-bottom-right-radius: 150px;
}
5. 背景盒子
利用background-xxx幾個(gè)屬性丈甸，可以給盒子設(shè)置背景圖片（應(yīng)用多個(gè)圖片，指定圖片是否重復(fù)尿褪，圖片位置等信息）睦擂。
.bgBox {
/*設(shè)置多張背景圖片*/
background-image: url("top-left.png"), url("bottom-right.png");
/*背景圖片不重復(fù)*/
background-repeat: no-repeat, no-repeat;
/*定義背景圖片位置*/
background-position: left top, right bottom;
}
6. 陰影盒子
CSS3定義了兩種陰影：文字陰影和盒子陰影，分別為text-shadow和box-shadow杖玲，陰影默認(rèn)被設(shè)置在盒子外部顿仇。
該屬性值格式為（[]內(nèi)的是可選項(xiàng)）：水平偏移量+垂直偏移量+陰影模糊程度[+陰影延伸范圍]+陰影顏色[+inset(在元素內(nèi)部創(chuàng)建陰影)]。
.box {
box-shadow: 1px 5px 10px 20px blue inset;
}
.text {
text-shadow: 1px 3px 5px green;
}
7. 漸變盒子
漸變是多種顏色混合的效果摆马，有三種漸變：
- 線性漸變：linear-gradient函數(shù)
- 徑向漸變：radial-gradient函數(shù)
目前臼闻，需要加瀏覽器前綴來(lái)支持漸變效果，而且今膊，不同瀏覽器支持函數(shù)參數(shù)不同：
/*一個(gè)從左到右的漸變效果*/
background-image: -moz-linear-gradient(left, $leftColor, $rightColor);
background-image: -ms-linear-gradient(left, $leftColor, $rightColor);
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, $leftColor), color-stop(1, $rightColor));
8. 過(guò)渡效果 transition
過(guò)渡效果有：顏色變換些阅，移動(dòng)。利用transition可以讓過(guò)渡效果更佳平滑斑唬。
transition屬性值格式為：過(guò)渡樣式+過(guò)渡時(shí)間
/*在盒子上應(yīng)用兩個(gè)過(guò)渡效果市埋，分為針對(duì)背景色和文本顏色*/
.box {
transition: background 0.5s, color 0.5s;
}
9. 變換 transform
變換包括移動(dòng)，縮放恕刘，旋轉(zhuǎn)等等缤谎，比如45度旋轉(zhuǎn)一個(gè)盒子transform: rotate(45deg)。下面是常用值：
- 旋轉(zhuǎn)
- 2D旋轉(zhuǎn)：rotate(angle)
- 3D旋轉(zhuǎn)：rotate3d(x,y,z,angle)
- 沿著X軸3D旋轉(zhuǎn)：rotateX(angle)
- 沿著Y軸3D旋轉(zhuǎn)：rotateY(angle)
- 沿著Z軸3D旋轉(zhuǎn)：rotateZ(angle)
- 縮放
- 2D縮放：scale(x, y)
- 3D縮放：scale3d(x,y,z)
- 位移
- 2D位移：translate(x,y)
- 3D位移：translate3d(x,y,z)
- 沿著X軸位移：translateX(x)
- 沿著Y軸位移：translateY(x)
- 沿著Z軸位移：translateZ(x)
- 傾斜旋轉(zhuǎn)
- 傾斜旋轉(zhuǎn)：skew(x-angle,y-angle)
- 沿X 軸傾斜旋轉(zhuǎn)：skewX(angle)
- 沿Y 軸傾斜旋轉(zhuǎn)：skewY(angle)
10. 動(dòng)畫 animation
動(dòng)畫設(shè)置分為兩部分褐着，一是定義動(dòng)畫幀變化坷澡；二是應(yīng)用動(dòng)畫。
定義動(dòng)畫幀變化含蓉，一般用百分?jǐn)?shù)把動(dòng)畫分割為若干關(guān)鍵點(diǎn)频敛，聲明在keyframes關(guān)鍵字下，分別定義每個(gè)節(jié)點(diǎn)的表現(xiàn)形式馅扣。
下面是一個(gè)W3C官網(wǎng)的例子斟赚，該動(dòng)畫有4個(gè)節(jié)點(diǎn)會(huì)發(fā)生左偏移和背景色變化（建議加上瀏覽器前綴）。
@-webkit-keyframes 'wobble' {
0% {
margin-left: 100px;
background: green;
}
40% {
margin-left: 150px;
background: orange;
}
60% {
margin-left: 75px;
background: blue;
}
100% {
margin-left: 100px;
background: red;
}
}
然后用animation屬性應(yīng)用動(dòng)畫：
.box {
/*動(dòng)畫屬性名差油，也就是前面keyframes定義的動(dòng)畫名*/
animation-name:'wobble';
/*動(dòng)畫持續(xù)時(shí)間拗军，以s或者ms計(jì)算*/
animation-duration: 10s;
/*動(dòng)畫速度曲線*/
animation-timing-function: ease-in-out;
/*動(dòng)畫延遲時(shí)間*/
animation-delay: 2s;
/*循環(huán)次數(shù)，infinite為無(wú)限次*/
animation-iteration-count: 10;
/*是否反向播放動(dòng)畫蓄喇，normal：默認(rèn)值发侵，正常播放；alternate：反向播放*/
animation-direction: alternate;
}
小結(jié)
CSS3新屬性非常多妆偏，上面10個(gè)只是比較常用的和渲染相關(guān)的功能刃鳄，如果需要進(jìn)一步學(xué)習(xí)，可以參考W3C或者developer.mozilla楼眷。
下一節(jié)：HTML5簡(jiǎn)明教程（四）Web存儲(chǔ)
