CSS3中的新特性詳解
這篇文章的目標讀者是網頁開發人員。本文首先講訴了CSS3的瀏覽器前綴，接著將講述一些基于標準的擴展。在CSS3特性的部分里，將涉及圓角，rgba顏色，陰影，漸變，動畫變換，和2D轉換等。
前綴
有一些瀏覽器在CSS3還未標準化之前就已經實現了CSS3的特性。因此，在語法還未被標準規定下來之前，一些CSS3的樣式就在那些瀏覽器中加上了其特定的前綴。例如在Firefox和Safari上，漸變的CSS3語法就不相同。Firefox 使用 -moz-linear-gradient，而 Safari (WebKit) 則使用 -webkitgradient。同理，很多的CSS3語法都被不同的瀏覽器加上了不同的前綴。
常見的前綴有：
? Chrome: -webkit-
? Safari: -webkit-
? Firefox: -moz-
? IE: -ms-
? Opera: -o-
目前，你應該首先聲明帶瀏覽器前綴的樣式，然后再聲明W3C標準的樣式。這是為了保證當未來的瀏覽器只支持標準化后的CSS3樣式時，你的代碼仍然能夠有效運行。
#prefix-example {
-moz-box-shadow: 0 3px 5px #FFF;
-webkit-box-shadow: 0 3px 5px #FFF;
box-shadow: 0 3px 5px #FFF;
}
顏色
CSS3提供了一些新方法來定義顏色，比如增加了alpha透明度的設置。在以前，想實現透明效果通常是平鋪一個 1px × 1px 的背景圖片，現在你可以拋棄那種做法了。
新增加的 rgb 樣式可以允許你用數字來定義RGB的值，而不再需要使用16進制了。 如果你想自己轉化兩者的對應值，你可以使用Safari自帶的 Web Inspector 工具，在 Styles 面板上點擊相應的顏色即可。
下面的代碼等同于 #FFF， 就是白色：
#rgb-example {
// rgb(red, green, blue);
color: rgb(255, 255, 255);
}
你也可以使用新增的 hsl 樣式。HSL分別代表色度、飽和度、亮度。
色度：代表在顏色盤上的度數，0度表示紅色，120度表示綠色，240度表示藍色。在之間的表示相應的中間色。
飽和度：一個百分比值，100% 表示完全顯示該顏色。
亮度： 也是一個百分比值，0% 表示暗（黑色），100% 表示亮（白色）。
如果采用rgb或者hsl寫法，那么增加alpha透明度非常簡單，只需要在后面加上一個 0 到1之間的小數即可。 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的環境下實現圓角效果簡直就是一種打擊。因為那通常需要額外的HTML代碼段，圖片甚至JavaScript代碼。
現在，事情變得容易多了，你只需要使用 border-radius 樣式。就像 padding 或者 margin的樣式定義一樣，你可以使用 4個radius來定義4個角，或者使用2個radius定義水平的和垂直的角，或者使用1個radius定義所有的角。如果你設置一個足夠大 的 radius，甚至可以將整個容器組成一個圓形。
#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之前，很多開發人員不會理會陰影效果，因為那是一個大麻煩。現在CSS3提供了 box-shadow 樣式，可以讓你輕松實現陰影效果。但是注意不要過度使用陰影效果，因為那可能帶來瀏覽器渲染的性能問題。
box-shadow 可以接受若干選項：垂直方向的偏移，水平方向的偏移，模糊的半徑，陰影擴展的距離，以及顏色。如果你還給出inset選項， 陰影將向容器內擴展，否者默認情況下，陰影是向容器外擴展的。另外，你也可以對一個容器使用若干個陰影，通過使用逗號隔開他們各自的定義，如同下列代碼所示：
#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之前，可能唯一實現文字陰影的方法就是使用加工好的圖片代替文字——真是一個淫蕩的方法。（沒錯，原文就是這么寫的 ==！）
現在，CSS3允許你通過 text-shadow 樣式來增加文字陰影。只需要傳入幾個參數：垂直偏移、水平偏移、模糊半徑(可選參數)、顏色。
#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);
}
文字陰影與容器陰影不同點就是：它不支持陰影擴展半徑和向內的陰影。
瀏覽器支持：
? Firefox: 完全支持
? Chrome: 完全支持
? Opera: 完全支持
? Safari: 完全支持
? IE: 不支持
漸變效果
以前，實現漸變效果通常是靠平鋪背景圖片。背景圖片是固定的寬度或者高度，然后靠圖像編輯軟件制造漸變效果。
CSS3增加了對線性漸變和徑向漸變漸變的支持，也被看作最有用的新特性之一。有若干個種CSS方法可以生成漸變，你只需要聲明對應的顏色即可。
對于線性漸變，只需要傳入顏色列表即可。
linear-gradient(#CCC, #DDD, white) 從CCC變到DDD，再變到FFF
默認情況下，漸變效果是垂直的。但是你可以通過傳入位置值來改變它的方向。
// horizontal gradient
linear-gradient(left, #CCC, #DDD, #FFF);
// or with a specific angle
linear-gradient(-45deg , #CCC , #FFF)
如果你希望更多地控制漸變效果從哪個位置開始，你可以在顏色旁邊使用聲明一個百分比或者像素值。
linear-gradient(white , #DDD 20% , black) 在容器高度20%的地方已經變成DDD了
你也可以漸變到透明，或者從透明漸變到不透明：
radial-gradient( rgba(255, 255, 255, .8) , transparent )
Safari目前使用的是不同的語法，在不久的將來它將變得兼容標準寫法。但是現在，你需要這樣使用：
// -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-
所以，一個支持跨瀏覽器的漸變效果實現的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里設置多重陰影一樣（逗號隔開），你也可以設置多重背景。
以前，實現多重背景通常需要創建若干嵌套的DOM元素。現在CSS3讓你只需使用"逗號隔開"的寫法加上若干個背景樣式了。這極大地簡化了代碼量。
#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中的第一個元素
:last-child
選擇Collection中的最后一個元素
:only-child
選擇只有一個孩子的元素
:target
選擇跟URL的hash值對應的元素
:checked
選擇被checked狀態的check元素
我想要重點講述的是下面一些選擇符：
第N個孩子
:nth-child 選擇符讓你改變每N個元素的樣式。例如，下面的代碼將選擇每第3個元素：
#example:nth-child( 3n ) { /* ... */ }
下面的代碼將選擇奇數號元素或者偶數號元素：
/* Even children */
#example:nth-child( 2n ) { /* ... */ }
#example:nth-child( even ) { /* ... */ }
/* Odd children */
#example:nth-child( 2n+1 ) { /* ... */ }
#example:nth-child( odd ) { /* ... */ }
你也可以使用反向的Nth-child選擇符。例如，下面代碼將選擇最后一個元素：
/* Last child */
#example:nth-last-child( 1 )
實際上，:first-child 選擇符等同于 :nth-child(1)，同理， :last-child 等同于 :nth-last-child(1) 。
直接孩子選擇符
你可以使用 大于符號> 來限制只選擇直接孩子元素
/* Only directly descendant divs */
#example > div { }
否定選擇符
你可以使用 :not 來否定一個簡單的選擇符。不過，目前否定選擇符并不支持復雜的選擇符，例如你不能這樣用 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增加了對transition的支持，使得你可以借由樣式變化創造簡單的動畫效果。你需要做的是傳入以下參數：變換持續時間，屬性，變換的方式（可選）。你可以使用秒(s)或微秒(ms)作為持續時間參數。
/* 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
有若干種時間點序列（timing sequence）方式可供選擇：
? linear
? ease-in
? ease-out
? ease-in-out
或者，你可以自定義一個時間點序列（timing sequence）。時間點序列的目的是控制transition效果在不同時間子段中的速度。
#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完成，一個名叫 WebKitTransitionEvent 的事件將在該元素上觸發。 在Firefox中，這個事件叫做 transitionend。 不好的地方是，使用CSS3有若干缺點：比如，在變換過程中你不能作過多的控制，以及并不是所有的DOM元素都是可變換的 （transitionable）。這就意味著，transition只能被用于簡單的動畫。另外，一些瀏覽器（例如 Safari）對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，那么必須至少有一個端點具有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 樣式，你可以設置一張圖片作為DOM元素的邊框。第一個參數指出圖片的URL，接著一個參數指出需要的圖片是怎樣從原圖片上切割的，最后一個參數指出圖片 的伸展方式。可選的伸展方式有round（平鋪），repeat（重復），和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（盒模型的大小調整？）
你是否曾經有過這樣的想法，使一個元素的寬度為100%，但是它仍然具有padding和margin值？對于傳統的盒模型來說，CSS對于百分比寬度的計算時參考的是父容器的寬度，然后再加上margin和padding。因此，如果一個元素有100%的寬 度，再加上padding和margin或者border，它一定會溢出的（overflow）。
現在，通過設置 box-sizing屬性的值為 border-box （它的默認值是contetbox），你可以改變盒模型大小計算的方式，讓它一并考慮borders、margins、padding,和content。
.border-box {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
該特性目前已被各瀏覽器廣泛支持了，而且它是安全穩定的除非你考慮在IE8之前的版本中使用。
形狀變換（Transformations）
拜CSS3所賜，我們可以實現簡單的2D形狀變換。比如，可以讓元素旋轉，縮放，傾斜。下面的代碼是把一個元素逆時針旋轉30度。
transform: rotate( -30deg );
下面的代碼是把一個元素沿著X方向和Y方向各自傾斜一定的角度。
transform: skew( 30deg , -10deg );
下面的代碼是使用scale表達式把一個元素的大小增加或減少一定的比例。默認情況下，一個元素的scale應該是1.0。
transform: scale(1.2);
注意，你可以通過并排這些transformation函數，從而達到實現多種變換的效果。
transform: rotate(30deg) skewX(30deg);
瀏覽器支持：
? Firefox: with -moz-
? Chrome: with -webkit-
? Safari: with -webkit-
? IE >= 9: with -ms-
? Opera: with -o-
活動盒模型（Flexible Box Model）
CSS3引進了活動盒模型的概念。這個概念在其他GUI框架上已經存在很久了，比如在Adobe Flex上。活動盒模型有什么用呢？比如，在以前，如果你想讓list元素按照水平方向排列，你需要使用元素浮動。現在活動盒模型讓你可以完成這個效果。請參照以下的代碼。
.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;
}
首先，我們設置該元素的display屬性值為 -webkit-box 或者 -moz-box。然后，設置direction的值，告訴該元素的子元素將如何排列它們的盒子。默認情況下，所有的子元素會相同地擴展以適應父元素的大小，但是，你可以設置 box-flex 改變這種行為。
通過設置 box-flex 為0，就使得子元素不會擴展。如果設置 box-flex 為1甚至更高的值，那么子元素將擴展以占領其他的空白的空間。例如，可以設置邊欄（sidebar）的 flex值為0，設置主欄的 flex值為1，這樣邊欄不會擴展，主欄將擴展到占滿剩余的空間。
#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 樣式可以讓你在網頁中使用自定義字體。這樣，該網頁的顯示就可以不再依賴于用戶電腦中已安裝的字體了。目前支持字體類型為 TrueType 或者 OpenType 的字體。字體文件必須放在跟該網頁相同的域名上。
使用 @font-face 時首先要給出該字體的font-family，然后給出指向字體文件的地址。
@font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("/fonts/VeraSeBd.ttf");
}
接著在網頁中的任何地方使用該字體了。font-family的值跟上面的font-family值對應。
#font-example {
font-family: "Bitstream Vera Serif Bold";
}
字體將以異步下載的方式下載到用戶瀏覽器中，并且在下載完成后作用與網頁上。在下載還未完成的時間里，那些字體會暫時以瀏覽器默認字體顯示。因此，如果考慮用戶體驗，可以先指定一個其他已安裝的可選字體來替換瀏覽器的默認字體。
瀏覽器支持：
? Firefox: full support
? Chrome: full support
? Safari: full support
? IE >= 9: full support
? Opera: full support
來自：http://www.cnblogs.com/newyorker/archive/2013/02/06/2896310.html