你們中有許多人可能已經聽到過有關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%);
邊框顏色
要使用這一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新功能的冰山一角。如果你想瞭解更多資訊，技巧和説明，我建議你訪問下面這些網站學習。
留言列表
視覺相關 (4)