本文《基于 CSS3 的下一代 Web 應用開發》系列文章的第 2 部分，第 1 部分我們將介紹了 CSS 的發展歷史，個版本的功能特點差異和 CSS3 引入的新特性。第 2 部分，我們針對這些 CSS3 新特性介紹其在不同瀏覽器中實現的差別，并結合實例講解如何利用這些特性進行開發。
在該系列文章第 1 部分中我們介紹了 CSS 的發展歷史以及各個版本的主要功能和差別。之后介紹了一些 CSS3 中引入的新特性和功能。這些新特性極大地增強了 Web 程序的表現能力，同時簡化了 Web UI 的編程模型。然而 CSS 一直存在的最大問題是眾多瀏覽器對 CSS 標準支持不統一，相同屬性在不同瀏覽器中有不同的實現。因此了解和處理 CSS3 新特性在各個瀏覽器中的實現差別是十分重要的。在本文中，我們將詳細介紹這些 CSS3 新特性在不同瀏覽器中的實現支持情況，并結合實例講解如何利用這些特性進行開發一些絢麗的應用。
RGBA 顏色是你可以使用 RGB 來控制兌現過的顏色并且可以調整對象的透明度，無論是文本、背景還是邊框均可使用該屬性。該屬的性語法在其支持的瀏覽器中相同，如下：
background:rgba(254, 255, 200, 0.75); |
例如上面代碼所示，前三個參數分別是分別是 R、G、B 三原色，范圍是 0-255。第四個參數是背景透明度，范圍是 0-1，如 0.5 代表透明度 50%。這個屬性使我們在瀏覽器中也可以做到像 Win7 一樣的半透明玻璃效果。
另外 RGBA 和 Opacity 之間的不同點是前者只會應用到指定的元素上，而后者會影響我們指定的元素及其子元素。目前支持 RBGA 顏色的瀏覽器有：Safari 4+、Chrome 1+、Firefox 3.0.5+、和 Opera 9.5+，IE 全系列瀏覽器都不支持該屬性。
CSS3 新特性中除了 RGBA 顏色，最常用的一項就是圓角效果。圓角屬性無需使用背景圖片就能給任意 HTML 元素添加圓角。使用 CSS3 圓角屬性將大大減少你制作圖片或者調試 JavaScript 的時間，并且瀏覽器原生態的支持運行更快、更穩定、顯示也更清晰。其在主要瀏覽器中的語法如下：
/*FireFox 語法 */ -moz-border-radius: 6px 6px 6px 6px; -moz-border-radius-topright: 6px; -moz-border-radius-topleft: 6px; -moz-border-radius-bottomright: 6px; -moz-border-radius-bottomleft: 6px; /*WebKit 核心瀏覽器語法 */ -webkit-border-radius: 6px 6px 6px 6px; -webkit-border-top-right-radius: 6px; -webkit-border-top-left-radius: 6px; -webkit-border-bottom-right-radius: 6px; -webkit-border-bottom-left-radius: 6px; /*CSS 標準語法 */ border-radius: 6px 6px 6px 6px; border-top-right-radius: 6px; border-top-left-radius: 6px; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; |
如上面代碼所示，四個角的效果可以通過一行代碼 border-radius: 6px 6px 6px 6px來指定，其中四個參數從左到右分別代表：左上角、右上角、右下角、左下角。也可以類似 border-top-right-radius: 6px;這樣分別指定每一個角的效果。
可以看出 Firefox 和 Webkit 核心的瀏覽器和 CSS 標準用法大同小于，只是屬性前綴有些差別。目前支持圓角屬性的瀏覽器有：Safari 3+、Chrome 1+、Firefox 1+，IE 全系列瀏覽器和 Opear 不支持該屬性。
塊陰影和文字陰影是你可以不適用圖片就能對 HTML 元素添加陰影，增加顯示的立體感增強設計的細節。快陰影使用 box-shadow 屬性，文字屬性使用 text-shadow 屬性，其語法如下：
/*FireFox 語法 */ -moz-box-shadow: 10px 10px 25px #CCC; -moz-text-shadow: 10px 10px 25px #CCC; /*WebKit 核心瀏覽器語法 */ -webkit-box-shadow: 10px 10px 25px #CCC; -webkit-text-shadow: 10px 10px 25px #CCC; /*CSS 標準語法 */ box-shadow: 10px 10px 25px #CCC; text-shadow: 10px 10px 25px #CCC; |
如上面代碼所示，第一個參數表示陰影水平偏移量，第二個表示陰影垂直偏移量，第三個參數表示陰影擴散的半徑，第四個參數定義陰影的顏色。
另外我們還可以定義多個陰影中間用逗號隔開，陰影的顏色可以使用 RGBA 透明色定義，例如
text-shadow: 0 010px rgba(0,255,0,0.5), -10px5px4px rgba(0,0,255,0.4),15px-4px3pxrgba(255,0,0,0.7); |
目前支持塊陰影和文字陰影的屬性有：Safari 3+、Chrome 1+、Firefox 3.0.5+，IE 全系列瀏覽器和 Opear 不支持該屬性。
漸變色是 Web 設計中很常用的一項元素，它可以增強 Web 元素的立體感同時使單一顏色的頁面看起來不是那么突兀。過去為了實現漸變色我們通常需要先制作一個漸變的圖片，將它切割成很細的一小片，然后使用背景重復使整個 HTML 元素擁有漸變的背景色。這樣做有兩個弊端：為了使用圖片背景很多時候使得本身簡單的 HTML 結構變得復雜；另外受制于背景圖片的長度或寬度，HTML 元素不能靈活的動態調整大小。CSS3 中 Webkit 和 Mozilla 對漸變都有強大的支持，但是不同之前的一些屬性，這次兩個廠商沒有能采用一致的語法。
background: -moz-linear-gradient(center top,/* 漸變開始的坐標 */rgba(254, 216, 80, 0.75),/* 漸變開始顏色 */rgba(230, 125, 30, 0.75) 50%,/* 中間漸變顏色 */rgba(254, 235, 121, 0.75)/* 漸變結束顏色 */ ) repeat scroll 0 0 transparent; |
如上面代碼所示，Mozilla 采用 -moz-linear-gradient標簽表示線性漸變。第一個參數表示漸變開始的坐標，可以是坐標值，也可以是 top、bottom、left、right、center 等值。后面參數是漸變的顏色值，個數不限，之間用逗號隔開。每個顏色值可以是普通的十六進制顏色也可以是 RGBA 顏色值。每個顏色后面還可以跟一個百分比或者 0-1 之間的小數，表示該顏色在整個漸變色中的比例。
background:-webkit-gradient(linear,/* 漸變類型線性 */left top,/* 漸變開始的坐標 */left bottom,/* 漸變結束的坐標 */from(rgba(254, 216, 80, 0.75)),/* 漸變開始顏色 */to(rgba(254, 235, 121, 0.75)),/* 漸變結束顏色 */color-stop(0.5,rgba(230, 125, 30, 0.75))/* 漸變的中間顏色 */ ) repeat scroll 0 0 transparent; |
Webkit 瀏覽器使用 -webkit-gradient屬性表示漸變。第一個參數是漸變類型，通常是 linear線性漸變。第二個參數是漸變開始的坐標，和 Mozilla 的第一個參數相同。第三個參數是漸變結束的坐標。第四個和第五個分別是漸變開始和結束的顏色，可以是十六進制顏色值，也可以是 RGBA 顏色值。最后的 color-stop屬性可以有無數個，在前五個參數的后面以逗號隔開，表示家變中間的漸變顏色。在 color-stop屬性中，第一個參數是該漸變色占得比例，可以是 0-1 的一個小數或者是一個百分數；第二個參數是漸變的顏色值同樣可以是十六進制的顏色值或者 RGBA 的顏色值。
從上面的效果圖可以看出，線性漸變是一個很強大的功能。使我們使用很少的 CSS 代碼就能做出以前需要使用很多圖片才能完成的效果，同時該功能是瀏覽器原生態支持的，渲染更快效果更好。很可惜的是目前支持該屬性的瀏覽器只有最新版的 Safari、Chrome、Firefox 瀏覽器支持，且語法差異較大。
形變 Transform 是 CSS 繼線性顏色漸變之后的又一枚重磅炸彈，通常使用 CSS 和 HTML 我們是不可能使 HTML 元素旋轉或者傾斜一定角度的。為了使元素看起來更具有立體敢，我們不得不把這種效果做成一個圖片，這樣就限制了很多動態的使用應用場景。Transform 屬性的引入使我們以前通常要借助 SVG 等矢量繪圖手段才能實現的功能，只需要一個簡單的 CSS 屬性就能實現。在 CSS3 中 Transform 屬性主要包括 rotate 旋轉、scale 縮放、translate 坐標平移、skew 坐標傾斜、matrix 矩陣變換。下面我們就來看看每個屬性是如何使用的。
/*Webkit 核心瀏覽器 */ -webkit-transform: rotate(-90deg); -webkit-transform: scale(2); -webkit-transform: scale(2, 1); -webkit-transform: translate(10px, 20px); -webkit-transform: skew(30deg, -10deg); -webkit-transform: matrix(1, -0.2, 0, 1, 0, 0); /*Firefox 瀏覽器 */ -moz-transform: rotate(-90deg); -moz-transform: scale(2); -moz-transform: scale(2, 1); -moz-transform: translate(10px, 20px); -moz-transform: skew(30deg, -10deg); -moz-transform: matrix(1, -0.2, 0, 1, 0, 0); /*Opera 瀏覽器 */ -o-transform: rotate(-90deg); -o-transform: scale(2); -o-transform: scale(2, 1); -o-transform: translate(10px, 20px); -o-transform: skew(30deg, -10deg); -o-transform: matrix(1, -0.2, 0, 1, 0, 0); |
旋轉屬性代碼非常簡單，rotate 屬性加上旋轉角度參數，45deg 代表順時針方向旋轉 45 度。如果是逆時針旋轉 45 度則是 -45deg。
類似于旋轉，縮放屬性是由 scale 關鍵字加上縮放參數實現的。當只有一個參數 2 時表示該 HTML 元素的 X 軸、Y 軸方向同時被放大 2 被，0.5 表示同時縮小一半。如果同時有 2 和 3 兩個參數時，表示該 HTML 元素的 X 軸被放大 2 被 Y 軸方向被放大 3 被。
坐標平移屬性顧名思義，就是將該 HTML 元素向 X、Y 軸方向平移若干像素，由 translate 屬性實現。后面兩個參數分別表示向 X 軸、Y 軸平移的量。
skew 屬性也是一個很有用的 transform 功能，它可以將一個對象圍繞著 X 和 Y 軸按照一定的角度傾斜。這和 rotate 的旋轉不一樣，rotate 只是旋轉而不會讓 HTML 元素的形狀改變，而 skew 會讓這個 HTML 元素的形狀改變。skew 有兩個參數，分別代表該 HTML 元素沿 X 和 Y 軸的傾斜度數。
Matrix，你沒有看錯，就是我們通常的矩陣變換。這個變換就是我們在解析幾何中學到的坐標系變換。他有六個參數 (a, b, c, d, e, f)，是一個 3 × 3 的矩陣，代表坐標變換的變換矩陣。使用它我們就可以很靈活的完成任意的坐標系變換。有興趣的朋友話可以查看大學解析幾何的課本，或者 W3c 在 SVG 中關于 Matrix 變化的定義和描述。
目前支持這 5 中變換轉屬性的瀏覽器有 Safari 4+、Chrome 5+、Firefox 3.5+、Opera10.5+，IE 全系列瀏覽器不支持該屬性。
之前對 CSS3 的一些新特性如何使用以及在各個瀏覽器中的實現做了詳細的介紹。那么如何使用這些屬性來開發一些絢麗的應用呢？下面我們就來看一個例子。
Message Bubble 是 Web 應用上很常用的 UI 元素，通常較為美觀的 Message Bubble 都是通過圖片加上一些 JavaScript 來實現的。上面是幾個是用純 CSS3+HTML 編寫的 Message Bubble 例子，這樣不但實現簡單，而且可以根據需要動態切換樣式。下面就結合 Message Bubble 的小例子講解如何應用我們之前介紹的 CSS3 的新特性。
實現這類帶不規則角的 Message Bubble 的關鍵是使用 :before、:after 兩個偽類和 content 屬性。通過 before、:after 兩個偽類在 bubble 的 html 元素后面添加另外兩個 dom 節點，通過 content 屬性將其內容設置為非空。之后通過調整節點大小和 border 的寬度來實現出不同的角的樣式。如下面代碼所示：
<blockquote class="message-bubble"> <p>Hello, I'm Qin Jian</p> </blockquote> .message-bubble { background:#B8DB29; margin:80px; padding:50px 40px; position:relative; width:230px; } .message-bubble:before { background:#B8DB29; bottom:-20px; content:" "; height:30px; left:50px; position:absolute; width:30px; z-index:-1; } .message-bubble:after { content:" "; background:#B8DB29; height:15px; width:15px; position:absolute; left:30px; bottom:-30px; z-index:-1; }
|
上面的代碼是一個基本的 Message Bubble 的例子。首先為 Message Bubble 添加基本 HTML 結構，加入你想要顯示的文字。之后使用偽類 before 和 after 為通過設置 content 屬性不為空為 Bubble 添加兩個 dom 節點。通過設置這兩個節點的大小、四個邊的邊框寬度、位置等屬實現不同的 Bubble 角的效果。上面代碼運行后將有下面的效果。
這樣我們就得到了一個基本的 Message Bubble 的形狀，接下來使用我們之前介紹的 CSS3 新特性，為 Bubble 加上一點圓角、背景漸變，效果如下：
這個 bubble 的效果是不是好了很多呢？之后我們再加上一點文字陰影、邊框陰影、還有鼠標懸停在節點上時節點放大和旋轉效果。
這樣一個效果很酷且具有很強交互性的 Message-Bubble 就做好了。重要的是我們沒有使用任何圖片，只需要更改 CSS 屬性我們就可以變換出各種各樣的樣式。例如圖 5 所示可以通過調整兩個偽類生成節點的大小和邊框寬度來設計出各種各樣的角的類型。有興趣的讀者可以自己實驗一下。以下是這個例子的全部 CSS 代碼。
.message-bubble { background:#B8DB29; margin:80px; padding:50px 40px; position:relative; width:230px; -moz-border-radius:220px 220px 220px 220px / 120px 120px 120px 120px; -webkit-border-radius:220px 220px 220px 220px / 120px 120px 120px 120px; background:-moz-linear-gradient(center top , #B8DB29, #5A8F00) repeat scroll / 0 0 transparent; background:-webkit-gradient( linear, left top, left bottom, from(#B8DB29), to(#5A8F00) ) repeat scroll 0 0 transparent; text-align:center; border:1px solid #CCC; color:#FFFFFF; -webkit-box-shadow:10px 10px 20px #000000; -moz-box-shadow:10px 10px 20px #000000; box-shadow:10px 10px 20px #000000; } .message-bubble p { font-size:1.25em; text-shadow:5px 5px 10px #000000; } .message-bubble:before { background:#B8DB29; bottom:-20px; content:" "; height:30px; left:50px; position:absolute; width:30px; z-index:-1; -moz-border-radius:30px 30px 30px 30px; -webkit-border-radius:30px 30px 30px 30px; background:-moz-linear-gradient(center top , #B8DB29, #5A8F00) repeat scroll / 0 0 transparent; background:-webkit-gradient( linear, left top, left bottom, from(#B8DB29), to(#5A8F00) ) repeat scroll 0 0 transparent; border:1px solid #CCC; -webkit-box-shadow:10px 10px 20px #000000; -moz-box-shadow:10px 10px 20px #000000; box-shadow:10px 10px 20px #000000; } .message-bubble:after { background:#B8DB29; bottom:-30px; content:" "; height:15px; left:30px; position:absolute; width:15px; z-index:-1; -moz-border-radius:15px 15px 15px 15px; -webkit-border-radius:15px 15px 15px 15px; background:-moz-linear-gradient(center top , #B8DB29, #5A8F00) repeat scroll / 0 0 transparent; background:-webkit-gradient( linear, left top, left bottom, from(#B8DB29), to(#5A8F00) ) repeat scroll 0 0 transparent; border:1px solid #CCC; -webkit-box-shadow:10px 10px 20px #000000; -moz-box-shadow:10px 10px 20px #000000; box-shadow:10px 10px 20px #000000; }
|
.message-bubble:hover{ cursor:pointer; -webkit-transform:scale(1.2) rotate(-5deg); -moz-transform:scale(1.2) rotate(-5deg); -webkit-transition-property:-webkit-transform; -webkit-transition-duration:2s; }
|
CSS3 為我們帶來的很多令人激動的新特性，使我們使用很簡單的代碼就能實現以前不能實現的效果和功能。然而由于這些新特性在不同瀏覽器中的支持不同，特別是 IE 瀏覽器的支持，使得我們很難做到兼容瀏覽器且視覺效果統一。以下作者根據對 CSS3 的使用經驗給出幾個使用上的建議。
- CSS3 的使用不應當影像頁面在各個瀏覽器中的正常顯示。我們可以使用 CSS3 的一些屬性來增強頁面表現力和用戶體驗，但是這個效果提升不應當影響其他瀏覽器用戶正常訪問該頁面。用戶應當還能正常使用頁面的功能，只是頁面效果不是那么好罷了。
- 同一頁面在不同瀏覽器中不必完全顯示一致。功能較強的瀏覽器頁面可以顯示的更炫一些，而較弱的瀏覽器可以顯示的不是那么酷，只要能完成基本的功能就行。大可不必為了在各個瀏覽器中得到同樣的現實效果而大費周折。
- 在某些不支持 CSS3 的瀏覽器中，我們可以使用替代方法來實現這些效果，但是需要平衡實現的復雜度和實現的性能問題。
CSS3 雖然還沒有正式發布，但是各個瀏覽器廠商已經開始迫不及待的支持部分新特性了。本文在該系列文章第 1 部分的基礎上，對 CSS3 的部分新特性進行了詳細的介紹，并結合一個實例講解如何使用這些新特性來開發一些應用。相信良好的藝術創意加上 CSS3 的變現能力，可以完成很多我們意想不到的效果和功能。然而 IE6/7/8 系列瀏覽器都不支持 CSS3 特性，遲遲未發布的 IE9 對 CSS3 支持也很有限，這使得很多開發人員因為 IE 的兼容性問題對 CSS3 望而卻步。在該系列文章的最后一部分，將詳細介紹如何在 IE 系列瀏覽器中使用替代方案來實現部分 CSS3 效果。