你們當中有許多人可能已經聽過CSS3的不少傳言，但是我們現在能真正用到的CSS3技巧又有哪些呢？本文，我將向你展示一些與眾不同的CSS3技巧，這些技巧在一些主要的瀏覽器中表現良好（如Firefox，Chrome，Safari，Opera瀏覽器）。這些效果會在不支援的瀏覽器中降級渲染（如IE瀏覽器）。使用瀏覽器特定的聲明，許多提議的CSS3樣式都可以馬上拿來使用。.jpg)
如果你不知道瀏覽器的特定聲明是什麼，你只需要記住它們都是CSS樣式屬性前與核心提供者有關的特定前綴。因為CSS3目前還沒有得到全面的支持，所以我們需要使用這些特定聲明。具體的形式如下：
* Mozilla/Firefox/Gecko瀏覽器的前綴: -moz-
* Webkit (Safari/Chrome)瀏覽器的前綴: -webkit- （注意：有些Wbkit的前綴只能在Safari下使用，Chrome不支援。）
你可能已經看到了，使用這些聲明的有一個缺點，那就是如果我們想在Firefox，Safari和Chrome中都得到CSS3的效果，我們需要使用到上面所有這些前綴。也不用驚訝，IE瀏覽器不支援CSS3，因此也不像其他主要瀏覽器有特定的前綴聲明。
好了，我們已經講的夠多了，我們馬上試試看。注意：樣式聲明去掉這些前綴就是W3標準的實際規範提案。
關於這個頁面的Demo（實例）說明
所有這些例子都是在這個頁裡面，如果你無法正常查看實例的效果（或只能查看部分），那就表示你正在使用的瀏覽器並不支援這些CSS3效果
陰影效果
陰影效果接受多個參數值。第一個是陰影的顏色，它還接受另外四個長度（lenght）值，前兩的長度值分辨是X（水平）偏移量和Y（垂直）偏移量。接下一個參數是反映模糊度的數值。第四也是最後一個值是用來定義模糊的散佈程度。
box-shadow: #333 3px 3px 4px;
-moz-box-shadow: #333 3px 3px 4px;
-webkit-box-shadow: #333 3px 3px 4px;
陰影效果演示
漸層效果
CSS3的漸層樣式剛開始很容易讓人混淆，尤其-moz 和-webkit的漸層之間仍有差異。在-moz中，你首先需要定義漸層的方向，然後定義起始和終止的顏色。而-webkit的漸變則稍微複雜一些，首先你需要定義漸變的類型，然後接下來兩個值定義方向，最後兩個值定義了漸變的起始顏色和終止顏色。
-moz-linear-gradient(-90deg,#1aa6de,#022147);
-webkit-gradient(linear, left top, left bottom, from(#1aa6de), to(#022147));
漸層效果演示
RGBA顏色模式
RGBA的顏色定義實際上用起來沒有給人的感覺那麼複雜，它接受四個參數值，以此是：紅色值，綠色值，藍色值，以及透明度。我們不用hex（#）16 進位值的顏色，我們以RGB的模式來設定顏色，其中，透明度可以設定顏色的透明效果。透明度的值範圍在0到1之間，0是完全不透明，1是顏色完全透明。以下這些示範範例的透明度都是0.5，元素的透明度是50%，rgba不需要附加任何特定的瀏覽器前綴聲明。
background-color: rgba(0, 54, 105, .5);
HSL色彩模式（色調H，飽和度S ，亮度L）
除了RGBA，CSS3也支援HSL顏色模式。這給我們在顏色和色調的選擇上提供了充足的餘地。在HSL這種色彩模式中的H代表色調，S代表色度，L代表亮度。色調是色盤上角度值 ，而保飽和度和亮度則是顏色的百分比值。
background-color: hsl(209,41.2%, 20.6%);
HSL演示實例
邊框顏色
要使用這一CSS樣式，你需要分別定義border-top, border-right, border-bottom, 和border-left 才能獲得下面的效果。你注意到定義一個8像素的邊框，然後邊框又定義了8種不同的顏色。這因為邊框的顏色數量必須與邊框的像素寬度值相對應。
border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
邊框顏色示範
文字選擇顏色設定
我不得不說文字選擇顏色的定義是一個相當令人興奮的新功能。當我第一次在CSS技巧上看到這個是，我在覺得它非常貼心。有了::selection這對偽物件（pseudo- element），你可以在使用者選一段文字元素時改變顏色和背景。如果你問的看法，我會覺得這非常漂亮。雖然::selection已經從目前的CSS3草案中移除鳥，但是我們希望稍後它在添加進來。
::selection {background: #3C0; /* Safari */color: #90C;}::-moz-selection {background: #3C0; /* Firefox */color: #90C;}
文字選擇顏色演示
變形
有了變形樣式，你可以讓元素的外觀在滑鼠懸停時變大。給Scale（比例）值設定一個大於1的數值，元素就會便打。反過來或，如果值小於1，元素的大小就會縮小。除了Scale比例，它還有其他許多不同的變形方式可用。你可以造訪Firefox的開發者頁面，查看它們所能實現的效果
-moz-transform: scale(1.15);-webkit-transform: scale(1.15);
變形效果演示
多欄佈局
有了這個新的多欄佈局樣式，你可以為文字呈現類似”報紙“排版的效果。跟在CSS2中的實作方法相比，CSS3中，我們實作這類效果要簡單的多。下面，我指定鳥所需的列數量，以及分離的規則類型，欄與欄之間的空隙有多大。用起來很簡單吧
-moz-column-count:3;-moz-column-rule: solid 1px black;-moz-column-gap: 20px;
總結
我希望跟我一樣，對CSS3的這些特性感到興奮。他給網頁設計師和開發者更多的力量，並且讓許多方面簡化不少。現在，我們只需等待所有瀏覽器支援它。當然，我在這裡示範的知識CSS3新功能的冰山一角。如果你想了解更多信息，技巧和幫助，我建議你訪問下面這些網站學習。