你們中有許多人可能已經聽到過有關CSS3的不少傳言，但是我們現在能真正用到的CSS3技巧又有哪些呢？本文，我將向你展示 一些與眾不同的CSS3技巧，這些技巧在一些主要的瀏覽器中表現良好（如Firefox，Chrome，Safari，Opera瀏覽器）。這些效果會在不支持的瀏覽器中降級渲染（如IE瀏覽器）。使用瀏覽器特定的聲明，許多提議的CSS3樣式都可以馬上拿來使用。
圖片：
如果你不知道瀏覽器的特定聲明是什麼，你只需要記住它們都是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演示實例