這篇文章的目標(biāo)讀者是網(wǎng)頁(yè)開發(fā)人員。本文首先講訴了CSS3的瀏覽器前綴，接著將講述一些基于標(biāo)準(zhǔn)的擴(kuò)展。在CSS3特性的部分里，將涉及圓角，rgba顏色，陰影，漸變，動(dòng)畫變換，和2D轉(zhuǎn)換等。
前綴
有一些瀏覽器在CSS3還未標(biāo)準(zhǔn)化之前就已經(jīng)實(shí)現(xiàn)了CSS3的特性。因此，在語(yǔ)法還未被標(biāo)準(zhǔn)規(guī)定下來之前，一些CSS3的樣式就在那些瀏覽器中加上了其特定的前綴。例如在firefox和Safari上，漸變的CSS3語(yǔ)法就不相同。Firefox 使用 -moz-linear-gradient，而 Safari (WebKit) 則使用 -webkitgradient。同理，很多的CSS3語(yǔ)法都被不同的瀏覽器加上了不同的前綴。
常見的前綴有：
• Chrome: -webkit-
• Safari: -webkit-
• Firefox: -moz-
• IE: -ms-
• Opera: -o-
目前，你應(yīng)該首先聲明帶瀏覽器前綴的樣式，然后再聲明W3C標(biāo)準(zhǔn)的樣式。這是為了保證當(dāng)未來的瀏覽器只支持標(biāo)準(zhǔn)化后的CSS3樣式時(shí)，你的代碼仍然能夠有效運(yùn)行。
#prefix-example {
-moz-box-shadow: 0 3px 5px #FFF;
-webkit-box-shadow: 0 3px 5px #FFF;
box-shadow: 0 3px 5px #FFF;
}顏色
CSS3提供了一些新方法來定義顏色，比如增加了alpha透明度的設(shè)置。在以前，想實(shí)現(xiàn)透明效果通常是平鋪一個(gè) 1px × 1px 的背景圖片，現(xiàn)在你可以拋棄那種做法了。
新增加的 rgb 樣式可以允許你用數(shù)字來定義RGB的值，而不再需要使用16進(jìn)制了。 如果你想自己轉(zhuǎn)化兩者的對(duì)應(yīng)值，你可以使用Safari自帶的 Web Inspector 工具，在 Styles 面板上點(diǎn)擊相應(yīng)的顏色即可。
下面的代碼等同于 #FFF， 就是白色：
#rgb-example {
// rgb(red, green, blue);
color: rgb(255, 255, 255);
}你也可以使用新增的 hsl 樣式。HSL分別代表色度、飽和度、亮度。
色度：代表在顏色盤上的度數(shù)，0度表示紅色，120度表示綠色，240度表示藍(lán)色。在之間的表示相應(yīng)的中間色。
飽和度：一個(gè)百分比值，100% 表示完全顯示該顏色。
亮度： 也是一個(gè)百分比值，0% 表示暗（黑色），100% 表示亮（白色）。
如果采用rgb或者h(yuǎn)sl寫法，那么增加alpha透明度非常簡(jiǎn)單，只需要在后面加上一個(gè) 0 到1之間的小數(shù)即可。 0表示完全透明，1表示完全不透明。
#alpha-example {
background: hsla(324, 100%, 50%, .5);
border: 1em solid rgba(0, 0, 0, .3);
color: rgba(255, 255, 255, .8);
}瀏覽器支持：
• Firefox: 完全支持
• Chrome: 完全支持
• Opera: 完全支持
• Safari: 完全支持
• IE: 完全支持
圓角
過去，在CSS2.1的環(huán)境下實(shí)現(xiàn)圓角效果簡(jiǎn)直就是一種打擊。因?yàn)槟峭ǔＰ枰~外的HTML代碼段，圖片甚至JavaScript代碼。
現(xiàn)在，事情變得容易多了，你只需要使用 border-radius 樣式。就像 padding 或者 margin的樣式定義一樣，你可以使用4個(gè)radius來定義4個(gè)角，或者使用2個(gè)radius定義水平的和垂直的角，或者使用1個(gè)radius定義所有的角。如果你設(shè)置一個(gè)足夠大的 radius，甚至可以將整個(gè)容器組成一個(gè)圓形。
#rounded-corner{
border-radius: 20px;
// horizonal, vertical
border-radius: 20px 20px;
// top left, top right, bottom right, bottom left
border-radius: 20px 20px 20px 20px;
}瀏覽器支持：
• Firefox: 完全支持
• Chrome: 完全支持
• Opera: 完全支持
• Safari: 需要使用 -webkit- 前綴
• IE: 版本9 以上支持
陰影
在CSS3之前，很多開發(fā)人員不會(huì)理會(huì)陰影效果，因?yàn)槟鞘且粋�(gè)大麻煩。現(xiàn)在CSS3提供了 box-shadow 樣式，可以讓你輕松實(shí)現(xiàn)陰影效果。但是注意不要過度使用陰影效果，因?yàn)槟强赡軒頌g覽器渲染的性能問題。
box-shadow 可以接受若干選項(xiàng)：垂直方向的偏移，水平方向的偏移，模糊的半徑，陰影擴(kuò)展的距離，以及顏色。如果你還給出inset選項(xiàng)，陰影將向容器內(nèi)擴(kuò)展，否者默認(rèn)情況下，陰影是向容器外擴(kuò)展的。另外，你也可以對(duì)一個(gè)容器使用若干個(gè)陰影，通過使用逗號(hào)隔開他們各自的定義，如同下列代碼所示：
#drop-shadows{
// horizonal offset, vertical offset, blur radius, color
box-shadow: 10px 5px 15px #000;
// inset shadows
box-shadow: 10px 5px 15px #000 inset;
// horizonal offset, vertical offset, blur radius, spread distance, color
box-shadow: 10px 5px 15px 15px #000;
// multiple shadows
box-shadow: 0 1px 1px #FFF inset, 5px 5px 10px #000;
}瀏覽器支持：
• Firefox: 完全支持
• Chrome: 需要使用 -webkit- 前綴
• Opera: 完全支持
• Safari: 需要使用 -webkit- 前綴
• IE: 版本9 以上支持
文字陰影
在CSS3之前，可能唯一實(shí)現(xiàn)文字陰影的方法就是使用加工好的圖片代替文字——真是一個(gè)淫蕩的方法。（沒錯(cuò)，原文就是這么寫的 ==�。�
現(xiàn)在，CSS3允許你通過 text-shadow 樣式來增加文字陰影。只需要傳入幾個(gè)參數(shù)：垂直偏移、水平偏移、模糊半徑(可選參數(shù))、顏色。
#text-shadow{
// horizonal offset, vertical offset, color
text-shadow: 1px 1px #FFF;
// horizonal offset, vertical offset, blur radius, color
text-shadow: 1px 1px .3em rgba(255, 255, 255, .8);
}文字陰影與容器陰影不同點(diǎn)就是：它不支持陰影擴(kuò)展半徑和向內(nèi)的陰影。
瀏覽器支持：
• Firefox: 完全支持
• Chrome: 完全支持
• Opera: 完全支持
• Safari: 完全支持
• IE: 不支持
漸變效果
以前，實(shí)現(xiàn)漸變效果通常是靠平鋪背景圖片。背景圖片是固定的寬度或者高度，然后靠圖像編輯軟件制造漸變效果。
CSS3增加了對(duì)線性漸變和徑向漸變漸變的支持，也被看作最有用的新特性之一。有若干個(gè)種CSS方法可以生成漸變，你只需要聲明對(duì)應(yīng)的顏色即可。
對(duì)于線性漸變，只需要傳入顏色列表即可。
linear-gradient(#CCC, #DDD, white) 從CCC變到DDD，再變到FFF
默認(rèn)情況下，漸變效果是垂直的。但是你可以通過傳入位置值來改變它的方向。
// horizontal gradient linear-gradient(left, #CCC, #DDD, #FFF); // or with a specific angle linear-gradient(-45deg , #CCC , #FFF)
如果你希望更多地控制漸變效果從哪個(gè)位置開始，你可以在顏色旁邊使用聲明一個(gè)百分比或者像素值。
linear-gradient(white , #DDD 20% , black) 在容器高度20%的地方已經(jīng)變成DDD了
你也可以漸變到透明，或者從透明漸變到不透明：
radial-gradient( rgba(255, 255, 255, .8) , transparent )
Safari目前使用的是不同的語(yǔ)法，在不久的將來它將變得兼容標(biāo)準(zhǔn)寫法。但是現(xiàn)在，你需要這樣使用：
// -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*); -webkit-gradient(linear, left top, left bottom, from(#FFF), color-stop(10%, #DDD), to(#CCC) );
盡管主流的瀏覽器都支持漸變，但是幾乎都要其瀏覽器前綴寫法：
• Firefox: with -moz-
• Chrome: with -webkit-
• Safari: alternative implementation
• IE >= 10: with -ms-
• Opera >= 11.1: with -o-
所以，一個(gè)支持跨瀏覽器的漸變效果實(shí)現(xiàn)的CSS代碼如下：
#gradient-example {
/* Fallback */
background: #FFF;
/* Chrome < 10, Safari < 5.1 */
background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#CCC));
/* Chrome >= 10, Safari >= 5.1 */
background: -webkit-linear-gradient(#FFF, #CCC);
/* Firefox >= 3.6 */
background: -moz-linear-gradient(#FFF, #CCC);
/* Opera >= 11.1 */
background: -o-linear-gradient(#FFF, #CCC);
/* IE >= 10 */
background: -ms-linear-gradient(#FFF, #CCC);
/* The standard */
background: linear-gradient(#FFF, #CCC);
}多重背景
就像你可以在CSS3里設(shè)置多重陰影一樣（逗號(hào)隔開），你也可以設(shè)置多重背景。
以前，實(shí)現(xiàn)多重背景通常需要?jiǎng)?chuàng)建若干嵌套的DOM元素�，F(xiàn)在CSS3讓你只需使用"逗號(hào)隔開"的寫法加上若干個(gè)背景樣式了。這極大地簡(jiǎn)化了代碼量。
#multiple-backgrounds{
background: url(snowflakes.png) top repeat-x,
url(chimney.png) bottom no-repeat,
-moz-linear-gradient(white, #CCC),
#CCC ;
}瀏覽器支持：
• Firefox: 完全支持
• Chrome: 完全支持
• Opera: 完全支持
• Safari: 完全支持
• IE: 版本9 以上支持
選擇符
CSS3提供了若干新的選擇符：
:first-child
選擇Collection中的第一個(gè)元素
:last-child
選擇Collection中的最后一個(gè)元素
:only-child
選擇只有一個(gè)孩子的元素
:target
選擇跟URL的hash值對(duì)應(yīng)的元素
:checked
選擇被checked狀態(tài)的check元素
我想要重點(diǎn)講述的是下面一些選擇符：
第N個(gè)孩子
:nth-child 選擇符讓你改變每N個(gè)元素的樣式。例如，下面的代碼將選擇每第3個(gè)元素：
#example:nth-child( 3n ) { /* ... */ }下面的代碼將選擇奇數(shù)號(hào)元素或者偶數(shù)號(hào)元素：
/* Even children */
#example:nth-child( 2n ) { /* ... */ }
#example:nth-child( even ) { /* ... */ }
/* Odd children */
#example:nth-child( 2n+1 ) { /* ... */ }
#example:nth-child( odd ) { /* ... */ }你也可以使用反向的Nth-child選擇符。例如，下面代碼將選擇最后一個(gè)元素：
/* Last child */ #example:nth-last-child( 1 )
實(shí)際上，:first-child 選擇符等同于 :nth-child(1)，同理， :last-child 等同于 :nth-last-child(1) 。
直接孩子選擇符
你可以使用 大于符號(hào)> 來限制只選擇直接孩子元素
/* Only directly descendant divs */
#example > div { }否定選擇符
你可以使用 :not 來否定一個(gè)簡(jiǎn)單的選擇符。不過，目前否定選擇符并不支持復(fù)雜的選擇符，例如你不能這樣用 p:not(h1 + p)
/* Only directly descendant children, except ones with the "current" class */
#example > *:not(.current) {
display: none
}瀏覽器支持：
• Firefox: 完全支持
• Chrome: 完全支持
• Opera: 完全支持
• Safari: 完全支持
• IE: 版本9 以上支持
變換效果（Transition）
CSS3增加了對(duì)transition的支持，使得你可以借由樣式變化創(chuàng)造簡(jiǎn)單的動(dòng)畫效果。你需要做的是傳入以下參數(shù)：變換持續(xù)時(shí)間，屬性，變換的方式（可選）。你可以使用秒(s)或微秒(ms)作為持續(xù)時(shí)間參數(shù)。
/* duration, property, animation type (optional) */ transition: 1.5s opacity ease-out /* Multiple transitions */ transition: 2s opacity , .5s height ease-in transition: .5s height , .5s .5s width
有若干種時(shí)間點(diǎn)序列（timing sequence）方式可供選擇：
• linear
• ease-in
• ease-out
• ease-in-out
或者，你可以自定義一個(gè)時(shí)間點(diǎn)序列（timing sequence）。時(shí)間點(diǎn)序列的目的是控制transition效果在不同時(shí)間子段中的速度。
#transition-example {
position: absolute;
/* cubic-bezier(x1, y1, x2, y2) */
transition: 5s left cubic-bezier(0.0, 0.35, .5, 1.3);
}在Safari和Chrome中，一旦transition完成，一個(gè)名叫 WebKitTransitionEvent 的事件將在該元素上觸發(fā)。 在Firefox中，這個(gè)事件叫做 transitionend。不好的地方是，使用CSS3有若干缺點(diǎn)：比如，在變換過程中你不能作過多的控制，以及并不是所有的DOM元素都是可變換的（transitionable）。這就意味著，transition只能被用于簡(jiǎn)單的動(dòng)畫。另外，一些瀏覽器（例如 Safari）對(duì)transition做了硬件層面上的渲染加速。
#transition-example {
width: 50px;
height: 50px;
background: red;
-webkit-transition: 2s background ease-in-out;
-moz-transition: 2s background ease-in-out;
-o-transition: 2s background ease-in-out;
transition: 2s background ease-in-out;
}
#transition-example:hover {
background: blue;
}由于某些原因，如果你想在漸變效果之上做transition，那么必須至少有一個(gè)端點(diǎn)具有alpha值。另外，你也不能在某些值之間作transition，比如height:0和 height:auto之間。
瀏覽器支持：
• Firefox: with -moz-
• Chrome: with -webkit-
• Safari: with -webkit-
• IE >= 10.0: with -ms-
• Opera: with -o-
邊框圖像
使用 border-image 樣式，你可以設(shè)置一張圖片作為DOM元素的邊框。第一個(gè)參數(shù)指出圖片的URL，接著一個(gè)參數(shù)指出需要的圖片是怎樣從原圖片上切割的，最后一個(gè)參數(shù)指出圖片的伸展方式�？蛇x的伸展方式有round（平鋪），repeat（重復(fù)），和stretch（縮放）。
border-image: url(border.png) 14 14 14 14 round round; border-image: url(border.png) 14 14 14 14 stretch stretch;
瀏覽器支持：
• Firefox: with -moz-
• Chrome: with -webkit-
• Safari: with -webkit-
• IE: 不支持
• Opera: with -o-
Box Sizing（盒模型的大小調(diào)整？）
你是否曾經(jīng)有過這樣的想法，使一個(gè)元素的寬度為100%，但是它仍然具有padding和margin值？ 對(duì)于傳統(tǒng)的盒模型來說，CSS對(duì)于百分比寬度的計(jì)算時(shí)參考的是父容器的寬度，然后再加上margin和padding。因此，如果一個(gè)元素有100%的寬度，再加上padding和margin或者border，它一定會(huì)溢出的（overflow）。
現(xiàn)在，通過設(shè)置 box-sizing屬性的值為 border-box （它的默認(rèn)值是contetbox），你可以改變盒模型大小計(jì)算的方式，讓它一并考慮borders、margins、padding,和content。
.border-box {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}該特性目前已被各瀏覽器廣泛支持了，而且它是安全穩(wěn)定的除非你考慮在IE8之前的版本中使用。
形狀變換（Transformations）
拜CSS3所賜，我們可以實(shí)現(xiàn)簡(jiǎn)單的2D形狀變換。比如，可以讓元素旋轉(zhuǎn)，縮放，傾斜。下面的代碼是把一個(gè)元素逆時(shí)針旋轉(zhuǎn)30度。
transform: rotate( -30deg );
下面的代碼是把一個(gè)元素沿著X方向和Y方向各自傾斜一定的角度。
transform: skew( 30deg , -10deg );
下面的代碼是使用scale表達(dá)式把一個(gè)元素的大小增加或減少一定的比例。默認(rèn)情況下，一個(gè)元素的scale應(yīng)該是1.0。
transform: scale(1.2);
注意，你可以通過并排這些transformation函數(shù)，從而達(dá)到實(shí)現(xiàn)多種變換的效果。
transform: rotate(30deg) skewX(30deg);
瀏覽器支持：
• Firefox: with -moz-
• Chrome: with -webkit-
• Safari: with -webkit-
• IE >= 9: with -ms-
• Opera: with -o-
活動(dòng)盒模型（Flexible Box Model）
CSS3引進(jìn)了活動(dòng)盒模型的概念。這個(gè)概念在其他GUI框架上已經(jīng)存在很久了，比如在Adobe Flex上�；顒�(dòng)盒模型有什么用呢？比如，在以前，如果你想讓list元素按照水平方向排列，你需要使用元素浮動(dòng)�，F(xiàn)在活動(dòng)盒模型讓你可以完成這個(gè)效果。請(qǐng)參照以下的代碼。
.hbox {
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-align: stretch;
-webkit-box-pack: left;
display: -moz-box;
-moz-box-orient: horizontal;
-moz-box-align: stretch;
-moz-box-pack: left;
}
.vbox {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-align: stretch;
display: -moz-box;
-moz-box-orient: vertical;
-moz-box-align: stretch;
}首先，我們?cè)O(shè)置該元素的display屬性值為 -webkit-box 或者 -moz-box。然后，設(shè)置direction的值，告訴該元素的子元素將如何排列它們的盒子。默認(rèn)情況下，所有的子元素會(huì)相同地?cái)U(kuò)展以適應(yīng)父元素的大小，但是，你可以設(shè)置 box-flex 改變這種行為。
通過設(shè)置 box-flex 為0，就使得子元素不會(huì)擴(kuò)展。如果設(shè)置 box-flex 為1甚至更高的值，那么子元素將擴(kuò)展以占領(lǐng)其他的空白的空間。例如，可以設(shè)置邊欄（sidebar）的 flex值為0，設(shè)置主欄的 flex值為1，這樣邊欄不會(huì)擴(kuò)展，主欄將擴(kuò)展到占滿剩余的空間。
#sidebar {
-webkit-box-flex: 0;
-moz-box-flex: 0;
box-flex: 0;
width: 200px;
}
#content {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
}瀏覽器支持：
• Firefox: with -moz-
• Chrome: with -webkit-
• Safari: with -webkit-
• IE >= 10: with -ms-
• Opera: 不支持
自定義字體
@font-face 樣式可以讓你在網(wǎng)頁(yè)中使用自定義字體。這樣，該網(wǎng)頁(yè)的顯示就可以不再依賴于用戶電腦中已安裝的字體了。目前支持字體類型為 TrueType 或者 OpenType 的字體。字體文件必須放在跟該網(wǎng)頁(yè)相同的域名上。
使用 @font-face 時(shí)首先要給出該字體的font-family，然后給出指向字體文件的地址。
@font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("/fonts/VeraSeBd.ttf");
}接著在網(wǎng)頁(yè)中的任何地方使用該字體了。font-family的值跟上面的font-family值對(duì)應(yīng)。
#font-example {
font-family: "Bitstream Vera Serif Bold";
}字體將以異步下載的方式下載到用戶瀏覽器中，并且在下載完成后作用與網(wǎng)頁(yè)上。在下載還未完成的時(shí)間里，那些字體會(huì)暫時(shí)以瀏覽器默認(rèn)字體顯示。因此，如果考慮用戶體驗(yàn)，可以先指定一個(gè)其他已安裝的可選字體來替換瀏覽器的默認(rèn)字體。
瀏覽器支持：
• Firefox: full support
• Chrome: full support
• Safari: full support
• IE >= 9: full support
• Opera: full support
喜歡 
頂
難過
囧
圍觀
無聊
