你了解CSS3的技巧嗎

class="area"> 你們中有許多人可能已經聽到過有關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演示實例

      邊框顏色

      要使用這一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新功能的冰山一角。