簡介： 現如今，隨着 Web2.0 技術的流行，之前的 CSS2 標準和相關技術似乎已經滿足不了日益增長的開發需求：人們需要實現更加美觀、用戶體驗更好的界面。CSS3，這個新一代的標準應運而生。爲了滿足現有的對於 Web UI 的開發需求，它提供了一系列強大的功能，如許多新的 CSS 屬性（文字，佈局，顏色等等），各種 CSS 特效，甚至還支持 CSS 動畫、元素的變換。這些 CSS 新特性在現階段可以說都是非常強大和完善的，您只需要加入幾行簡單的 CSS 代碼便可以實現出一系列令人眼前一亮的效果，這比我們之前用 JavaScript 去模擬這樣的效果要好得多，不僅降低了複雜度，變得易維護，在性能上也突飛猛進了。這篇文章將主要來介紹 CSS3 的新特性以及一些使用上的技巧。
The Book of CSS3:
A Developer's Guide to the Future of Web Design
HTML5 and CSS3:
Develop with Tomorrow's Standards Today
CSS 即層疊樣式表（Cascading Stylesheet）。Web 開發中採用 CSS 技術，可以有效地控制頁面的佈局、字體、顏色、背景和其它效果。只需要一些簡單的修改，就可以改變網頁的外觀和格式。CSS3 是 CSS 的升級版本，這套新標準提供了更加豐富且實用的規範，如：盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄佈局等等，目前有很多瀏覽器已經相繼支持這項升級的規範，如：Firefox、Chrome、Safari、Opera 等等。在 Web 開發中採用 CSS3 技術將會顯著的美化我們的應用程序，提高用戶體驗，同時也能極大的提高程序的性能。本文將重點介紹一些比較絢麗且實用 CSS3 新特性。
寫過 CSS 的人應該對 CSS 選擇器不陌生，我們所定義的 CSS 屬性之所以能應用到相應的節點上，就是因爲 CSS 選擇器模式。參考下述代碼：
清單 1. CSS 選擇器案例
Body > .mainTabContainer div > span[5]{
Border: 1px solod red;
Background-color: white;
Cursor: pointer;
}
|
此處的 CSS 選擇器即：“body > .mainTabContainer div span[5]” 代表這這樣一條路徑：
1. “body”標籤直接子元素裏 class 屬性值爲“mainTabContainer”的所有元素 A
2. A 的後代元素（descendant）裏標籤爲 div 的所有元素 B
3. B 的直接子元素中的第 5 個標籤爲 span 的元素 C
這個 C 元素（可能爲多個）即爲選擇器定位到的元素，如上的 CSS 屬性也會全部應用到 C 元素上。
以上爲 CSS2 及之前版本所提供的主要定位方式。現在，CSS3 提供了更多更加方便快捷的選擇器：
清單 2. CSS3 選擇器案例
Body > .mainTabContainer tbody:nth-child(even){
Background-color: white;
}
Body > .mainTabContainer tr:nth-child(odd){
Background-color: black;
}
:not(.textinput){
Font-size: 12px;
}
Div:first-child{
Border-color: red;
}
|
如上所示，我們列舉了一些 CSS3 的選擇器，在我們日常的開發中可能會經常用到，這些新的 CSS3 特性解決了很多我們之前需要用 JavaScript 腳本才能解決的問題。
tbody: nth-child(even), nth-child(odd)：此處他們分別代表了表格（tbody）下面的偶數行和奇數行（tr），這種樣式非常適用於表格，讓人能非常清楚的看到表格的行與行之間的差別，讓用戶易於瀏覽。
: not(.textinput)：這裏即表示所有 class 不是“textinput”的節點。
div:first-child：這裏表示所有 div 節點下面的第一個直接子節點。
除此之外，還有很多新添加的選擇器：
E:nth-last-child(n) E:nth-of-type(n) E:nth-last-of-type(n) E:last-child E:first-of-type E:only-child E:only-of-type E:empty E:checked E:enabled E:disabled E::selection E:not(s) |
這裏不一一介紹。學會利用這些新特性可以極大程度的減少我們的無畏代碼，並且大幅度的提高程序的性能。
Font-face 可以用來加載字體樣式，而且它還能夠加載服務器端的字體文件，讓客戶端顯示客戶端所沒有安裝的字體。
先來看一個客戶端字體簡單的案例：
清單 3. Font-face 客戶端字體案例
<p><font face="arial">arial courier verdana</font></p>
|
我們可以通過這種方式直接加載字體樣式，因爲這些字體（arial）已經安裝在客戶端了。清單 3 這種寫法的作用等同於清單 4：
清單 4. 字體基本寫法
<p><font style="font-family: arial">arial courier verdana</font></p>
|
相信這種寫法大家應該再熟悉不過了。
接下來我們看看如何使用服務端字體，即：未在客戶端安裝的字體樣式。
參看如下代碼：
清單 5. Font-face 服務端字體案例
@font-face {
font-family: BorderWeb;
src:url(BORDERW0.eot);
}
@font-face {
font-family: Runic;
src:url(RUNICMT0.eot);
}
.border { FONT-SIZE: 35px; COLOR: black; FONT-FAMILY: "BorderWeb" }
.event { FONT-SIZE: 110px; COLOR: black; FONT-FAMILY: "Runic" }
|
清單 5 中聲明的兩個服務端字體，其字體源指向“BORDERW0.eot”和“RUNICMT0.eot”文件，並分別冠以“BorderWeb”和“Runic”的字體名稱。聲明之後，我們就可以在頁面中使用了：“ FONT-FAMILY: "BorderWeb" ” 和 “ FONT-FAMILY: "Runic" ”。
這種做法使得我們在開發中如果需要使用一些特殊字體，而又不確定客戶端是否已安裝時，便可以使用這種方式。
先來看看 word-wrap 屬性，參考下述代碼：
清單 6. word-wrap 案例
<div style="width:300px; border:1px solid #999999; overflow: hidden">
wordwrapbreakwordwordwrapbreakwordwordwrapbreakwordwordwrapbreakword
</div>
<div style="width:300px; border:1px solid #999999; word-wrap:break-word;">
wordwrapbreakwordwordwrapbreakwordwordwrapbreakwordwordwrapbreakword
</div>
|
比較上述兩段代碼，加入了“word-wrap: break-word”，設置或檢索噹噹前行超過指定容器的邊界時是否斷開轉行，文字此時已被打散。所以可見如下的差別：
圖 1. 沒有 break-word
圖 2. 有 break-word
知道了 word-wrap 的原理，我們再來看看 text-overflow，其實它與 word-wrap 是協同工作的，word-wrap 設置或檢索噹噹前行超過指定容器的邊界時是否斷開轉行，而 text-overflow 則設置或檢索噹噹前行超過指定容器的邊界時如何顯示，見如下示例：
清單 7. Text-overflow 案例
.clip{text-overflow:clip; overflow:hidden; white-space:nowrap;
width:200px;background:#ccc;}
.ellipsis{text-overflow:ellipsis; overflow:hidden; white-space:nowrap;
width:200px; background:#ccc;}
<div class="clip">
不顯示省略標記，而是簡單的裁切條
</div>
<div class="ellipsis">
當對象內文本溢出時顯示省略標記
</div>
|
如清單 7 所示，這裏我們均使用“overflow: hidden”，對於“text-overflow”屬性，有“clip”和“ellipsis”兩種可供選擇。見圖 3 的效果圖。
圖 3. Text-overflow 效果圖
這裏我們可以看到，ellipsis 的顯示方式比較人性化，clip 方式比較傳統，我們可以依據需求進行選擇。
CSS3 裏面開始支持對文字的更深層次的渲染，我們來看看下面的例子：
清單 8. Text-decoration 案例
div {
-webkit-text-fill-color: black;
-webkit-text-stroke-color: red;
-webkit-text-stroke-width: 2.75px;
}
|
這裏我們主要以 webkit 內核瀏覽器爲例，清單 8 的代碼效果如圖 4：
圖 4. Text-decoration 效果圖
Text-fill-color: 文字內部填充顏色
Text-stroke-color: 文字邊界填充顏色
Text-stroke-width: 文字邊界寬度
CSS3 的多列布局（multi-column layout）
CSS3 現在已經可以做簡單的佈局處理了，這個 CSS3 新特性又一次的減少了我們的 JavaScript 代碼量，參考如下代碼：
清單 9. CSS3 多列布局
.multi_column_style{
-webkit-column-count: 3;
-webkit-column-rule: 1px solid #bbb;
-webkit-column-gap: 2em;
}
<div class="multi_column_style">
.................
.................
</div>
|
這裏我們還是以 webkit 內核瀏覽器爲例：
Column-count：表示佈局幾列。
Column-rule：表示列與列之間的間隔條的樣式
Column-gap：表示列於列之間的間隔
清單 9 的代碼效果圖如圖 5：
圖 5. 多列布局效果圖
關於顏色，CSS3 已經提供透明度的支持了：
清單 10. 顏色的透明度
color: rgba(255, 0, 0, 0.75);
background: rgba(0, 0, 255, 0.75);
|
這裏的“rgba”屬性中的“a”代表透明度，也就是這裏的“0.75”，同時 CSS3 還支持 HSL 顏色聲明方式及其透明度：
清單 11. HSL 的透明度
color: hsla( 112, 72%, 33%, 0.68);
|
對於 border，CSS3 提供了圓角的支持：
清單 12. 圓角案例
border-radius: 15px;
|
參見下面圓角效果：
Figure xxx. Requires a heading
左上（0% 0%）到右上（0% 100%）即從左到右水平漸變：
清單 13. 左到右的漸變
background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E));
|
這裏 linear 表示線性漸變，從左到右，由藍色（#2A8BBE）到紅色（#FE280E）的漸變。效果圖如下：
圖 6. 簡單線性漸變效果圖
同理，也可以有從上到下，任何顏色間的漸變轉換：
圖 7. 各種不同線性漸變效果圖
還有複雜一點的漸變，如：水平漸變，33% 處爲綠色，66% 處爲橙色：
清單 14. 複雜線性漸變
background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),
color-stop(0.33,#AAD010),color-stop(0.33,#FF7F00),to(#FE280E));
|
這裏的“color-stop”爲拐點，可見效果圖：
圖 8. 複雜線性漸變效果圖
接下來我們要介紹徑向漸變（radial），這不是從一個點到一個點的漸變，而從一個圓到一個圓的漸變。不是放射漸變而是徑向漸變。來看一個例子：
清單 15. 徑向漸變（目標圓半徑爲 0）
backgroud:
-webkit-gradient(radial,50 50,50,50 50,0,from(black),color-stop(0.5,red),to(blue));
|
前面“50,50,50”是起始圓的圓心座標和半徑，“50,50,0”藍色是目標圓的圓心座標和半徑，“color-stop(0.5,red)”是斷點的位置和色彩。這裏需要說明一下，和放射由內至外不一樣，徑向漸變剛好相反，是由外到內的漸變。清單 15 標識的是兩個同心圓，外圓半徑爲 50px，內圓半徑爲 0，那麼就是從黑色到紅色再到藍色的正圓形漸變。下面就是這段代碼的效果：
圖 9. 徑向漸變（目標圓半徑爲 0）效果圖
如果我們給目標源一個大於 0 半徑，您會看到另外一個效果：
清單 16. 徑向漸變（目標圓半徑非 0）
backgroud:
-webkit-gradient(radial,50 50,50,50 50,10,from(black),color-stop(0.5,red),to(blue));
|
這裏我們給目標圓半徑爲 10，效果圖如下：
圖 10. 徑向漸變（目標圓半徑非 0）
您可以看到，會有一個半徑爲 10 的純藍的圓在最中間，這就是設置目標圓半徑的效果。
現在我再改變一下，不再是同心圓了，內圓圓心向右 20px 偏移。
清單 17. 徑向漸變（目標圓圓心偏移）
backgroud:
-webkit-gradient(radial,50 50,50,70 50,10,from(black),color-stop(0.5,red),to(blue));
|
這裏我們給目標圓半徑還是 10，但是圓心偏移爲“70，50”（起始圓圓心爲“50，50”）效果圖如下：
圖 11. 徑向漸變（目標圓圓心偏移）
想必您明白原理了，我們可以做一個來自頂部的漫射光，類似於開了盞燈：
清單 18. 徑向漸變（漫射光）
backgroud:-webkit-gradient(radial,50 50,50,50 1,0,from(black),to(white));
|
其效果如下：
圖 12. 徑向漸變（漫射光）
CSS3 的陰影（Shadow）和反射（Reflect）效果
首先來說說陰影效果，陰影效果既可用於普通元素，也可用於文字，參考如下代碼：
清單 19. 元素和文字的陰影
.class1{
text-shadow:5px 2px 6px rgba(64, 64, 64, 0.5);
}
.class2{
box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3);
}
|
設置很簡單，對於文字陰影：表示 X 軸方向陰影向右 5px,Y 軸方向陰影向下 2px, 而陰影模糊半徑 6px，顏色爲 rgba(64, 64, 64, 0.5)。其中偏移量可以爲負值，負值則反方向。元素陰影也類似。參考一下效果圖：
圖 13. 元素和文字的陰影效果圖
接下來我們再來談談反射，他看起來像水中的倒影，其設置也很簡單，參考如下代碼：
清單 20. 反射
.classReflect{
-webkit-box-reflect: below 10px
-webkit-gradient(linear, left top, left bottom, from(transparent),
to(rgba(255, 255, 255, 0.51)));
}
|
設置也很簡單，大家主要關注“-webkit-box-reflect: below 10px”，他表示反射在元素下方 10px 的地方，再配上漸變效果，可見效果圖如下：
圖 14. 反射效果圖
CSS3 多出了幾種關於背景（background）的屬性，我們這裏會簡單介紹一下：
首先：“Background Clip”，該屬確定背景畫區，有以下幾種可能的屬性：
* background-clip: border-box; 背景從 border 開始顯示 ;
* background-clip: padding-box; 背景從 padding 開始顯示 ;
* background-clip: content-box; 背景顯 content 區域開始顯示 ;
* background-clip: no-clip; 默認屬性，等同於 border-box;
通常情況，我們的背景都是覆蓋整個元素的，現在 CSS3 讓您可以設置是否一定要這樣做。這裏您可以設定背景顏色或圖片的覆蓋範圍。
其次：“Background Origin”，用於確定背景的位置，它通常與 background-position 聯合使用，您可以從 border、padding、content 來計算 background-position（就像 background-clip）。
* background-origin: border-box; 從 border. 開始計算 background-position;
* background-origin: padding-box; 從 padding. 開始計算 background-position;
* background-origin: content-box; 從 content. 開始計算 background-position;
還有，“Background Size”，常用來調整背景圖片的大小，注意別和 clip 弄混，這個主要用於設定圖片本身。有以下可能的屬性：
* background-size: contain; 縮小圖片以適合元素（維持像素長寬比）
* background-size: cover; 擴展元素以填補元素（維持像素長寬比）
* background-size: 100px 100px; 縮小圖片至指定的大小 .
* background-size: 50% 100%; 縮小圖片至指定的大小，百分比是相對包 含元素的尺寸 .
最後，“Background Break”屬性，CSS3 中，元素可以被分成幾個獨立的盒子（如使內聯元素 span 跨越多行），background-break 屬性用來控制背景怎樣在這些不同的盒子中顯示。
* background-break: continuous; 默認值。忽略盒之間的距離（也就是像元 素沒有分成多個盒子，依然是一個整體一 樣）
* background-break: bounding-box; 把盒之間的距離計算在內；
* background-break: each-box; 爲每個盒子單獨重繪背景。
這種屬性讓您可以設定複雜元素的背景屬性。
最爲重要的一點，CSS3 中支持多背景圖片，參考如下代碼：
清單 21. 多背景圖片
div {
background: url(src/zippy-plus.png) 10px center no-repeat,
url(src/gray_lines_bg.png) 10px center repeat-x;
}
|
此爲同一元素兩個背景的案例，其中一個重複顯示，一個不重複。參考一下效果圖：
圖 15. 多背景圖片
盒子模型爲開發者提供了一種非常靈活的佈局方式，但是支持這一特性的瀏覽器並不多，目前只有 webkit 內核的新版本 safari 和 chrome 以及 gecko 內核的新版本 firefox。
下面我們來介紹一下他是如何工作的，參考如下代碼：
清單 22. CSS3 盒子模型
<div class="boxcontainer">
<div class="item">
1
</div>
<div class="item">
2
</div>
<div class="item">
3
</div>
<div class="item flex">
4
</div>
</div>
|
默認情況下，如果“boxcontainer”和“item”兩個 class 裏面沒有特殊屬性的話，由於 div 是塊狀元素，所以他的排列應該是這樣的：
圖 16. CSS3 盒子模型效果圖
下面，我們加入相關 CSS3 盒子模型屬性：
清單 23. CSS3 盒子模型（水平排列）
.boxcontainer {
width: 1000px;
display: -webkit-box;
display: -moz-box;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
}
.item {
background: #357c96;
font-weight: bold;
margin: 2px;
padding: 20px;
color: #fff;
font-family: Arial, sans-serif;
}
|
注意這裏的“display: -webkit-box; display: -moz-box;”，它針對 webkit 和 gecko 瀏覽器定義了該元素的盒子模型。注意這裏的“-webkit-box-orient: horizontal;”，他表示水平排列的盒子模型。此時，我們會看到如下效果：
圖 17. CSS3 盒子模型（水平排列）效果圖
細心的讀者會看到，“盒子”的右側多出來了很大一塊，這是怎麼回事呢？讓我們再來看一個比較有特點的屬性：“flex”， 參考如下代碼：
清單 24. CSS3 盒子模型（flex）
<div class="boxcontainer">
<div class="item">
1
</div>
<div class="item">
2
</div>
<div class="item">
3
</div>
<div class="item flex">
4
</div>
</div>
.flex {
-webkit-box-flex: 1;
-moz-box-flex: 1;
}
|
您看到什麼區別了沒？在第四個“item 元素”那裏多了一個“flex”屬性，直接來看看效果吧：
圖 18. CSS3 盒子模型（flex）效果圖
第四個“item 元素”填滿了整個區域，這就是“flex”屬性的作用。如果我們調整一下“box-flex”的屬性值，並加入更多的元素，見如下代碼：
清單 25. CSS3 盒子模型（flex 進階）
<div class="boxcontainer">
<div class="item">
1
</div>
<div class="item">
2
</div>
<div class="item flex2">
3
</div>
<div class="item flex">
4
</div>
</div>
.flex {
-webkit-box-flex: 1;
-moz-box-flex: 1;
}
.flex2 {
-webkit-box-flex: 2;
-moz-box-flex: 2;
}
|
我們把倒數第二個元素（元素 3）也加上“box-flex”屬性，並將其值設爲 2，可見其效果圖如下：
圖 19. CSS3 盒子模型（flex 進階）效果圖
由此可見，元素 3 和元素 4 按比例“2:1”的方式填充外層“容器”的餘下區域，這就是“box-flex”屬性的進階應用。
還有，“box-direction”可以用來翻轉這四個盒子的排序，“box-ordinal-group”可以用來改變每個盒子的位置：一個盒子的 box-ordinal-group 屬性值越高，就排在越後面。盒子的對方方式可以用“box-align”和“box-pack”來設定。
CSS3 的 Transitions, Transforms 和 Animation
先說說 Transition，Transition 有下面些具體屬性：
transition-property：用於指定過渡的性質，比如 transition-property:backgrond 就是指 backgound 參與這個過渡
transition-duration：用於指定這個過渡的持續時間
transition-delay：用於制定延遲過渡的時間
transition-timing-function：用於指定過渡類型，有 ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier
可能您覺得摸不着頭腦，其實很簡單，我們用一個例子說明，參看一下如下代碼：
清單 26. CSS3 的 Transition
<div id="transDiv" class="transStart"> transition </div>
.transStart {
background-color: white;
-webkit-transition: background-color 0.3s linear;
-moz-transition: background-color 0.3s linear;
-o-transition: background-color 0.3s linear;
transition: background-color 0.3s linear;
}
.transEnd {
background-color: red;
}
|
這裏他說明的是，這裏 id 爲“transDiv”的 div，當它的初始“background-color”屬性變化時（被 JavaScript 修改），會呈現出一種變化效果，持續時間爲 0.3 秒，效果爲均勻變換（linear）。如：該 div 的 class 屬性由“transStart”改爲“transEnd”，其背景會由白（white）漸變到紅（red）。
再來看看 Transform，其實就是指拉伸，壓縮，旋轉，偏移等等一些圖形學裏面的基本變換。見如下代碼：
清單 27. CSS3 的 Transform
.skew {
-webkit-transform: skew(50deg);
}
.scale {
-webkit-transform: scale(2, 0.5);
}
.rotate {
-webkit-transform: rotate(30deg);
}
.translate {
-webkit-transform: translate(50px, 50px);
}
.all_in_one_transform {
-webkit-transform: skew(20deg) scale(1.1, 1.1) rotate(40deg) translate(10px, 15px);
}
|
“skew”是傾斜，“scale”是縮放，“rotate”是旋轉，“translate”是平移。最後需要說明一點，transform 支持綜合變換。可見其效果圖如下：
圖 20. CSS3 的 Transform 效果圖
現在您應該明白 Transform 的作用了吧。結合我們之前談到的 Transition，將它們兩者結合起來，會產生類似旋轉，縮放等等的效果，絕對能令人耳目一新。
最後，我們來說說 Animation 吧。它可以說開闢了 CSS 的新紀元，讓 CSS 脫離了“靜止”這一約定俗成的前提。以 webkit 爲例，見如下代碼：
清單 28. CSS3 的 Animation
@-webkit-keyframes anim1 {
0% {
Opacity: 0;
Font-size: 12px;
}
100% {
Opacity: 1;
Font-size: 24px;
}
}
.anim1Div {
-webkit-animation-name: anim1 ;
-webkit-animation-duration: 1.5s;
-webkit-animation-iteration-count: 4;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
}
|
首先，定義動畫的內容，如清單 28 所示，定義動畫“anim1”，變化方式爲由“透明”（opacity: 0）變到“不透明”（opacity: 1），同時，內部字體大小由“12px”變到“24px”。然後，再來定義 animation 的變化參數，其中，“duration”表示動畫持續時間，“iteration-count”表示動畫重複次數，direction 表示動畫執行完一次後方向的變化方式（如第一次從右向左，第二次則從左向右），最後，“timing-function”表示變化的模式。
其實，CSS3 動畫幾乎支持所有的 style 變化，可以定義各種各樣的動畫效果以滿足我們用戶體驗的需要。
這裏，我們介紹了 CSS3 的主要的新特性，這些特性在 Chrome 和 Safari 中基本都是支持的，Firefox 支持其中的一部分，IE 和 Opera 支持的較少。讀者們可以根據集體情況有選擇的使用。
本文介紹了 Web 開發中關於 CSS3 的一些內容，由淺入深的逐步引出 CSS3 的各種相關屬性。基於各個 CSS3 屬性的原理，通過實際的源代碼介紹各個 CSS3 新特性的特點，使用方式以及使用中需要注意的地方。在每個新特性的代碼示例後面，通過示例圖，給 Web 開發人員一種比較直觀的視覺感受。在 Web2.0 越來越流行的今天，熟練掌握並能很好的運用 CSS3 的一些特性會給我們的項目帶來前所未有的用戶體驗效果。
學習
-
CSS info：一個介紹 CSS3 相關知識的網站，提供很多 CSS3 的實例和解釋，以及 CSS3 與 CSS2 之間的比較。
-
CSS W3C 標準提供了很多 CSS 的標準和使用指南，有很多經典實例。
-
“基於 CSS3 的下一代 Web 應用開發，第 1 部分：發展歷史及新特性”（developerWorks，2011 年 1 月）：CSS3 大大簡化了編程模型，它不僅是對已有功能的擴展和延伸，而更多的是對 Web UI 設計理念的和方法的革新。本文首先將介紹
CSS 的發展歷史，然後講解了各個版本的功能特點和差異，隨後重點講解了 CSS3 引入的新特性，並給出一些應用實例。
-
“基於 CSS3 的下一代 Web 應用開發，第 2 部分：實現和應用”（developerWorks，2011 年 5 月）：本文將繼續第 1 部分的內容，爲您詳細介紹 CSS3 新增的特性和 UI 效果，講解其在不同瀏覽器中實現的差別，並結合實例說明如何利用這些特性進行開發。
-
“基於 CSS3 的下一代 Web 應用開發，第 3 部分：在 IE 中的特殊處理”（developerWorks，2011 年 5 月）由於 IE6/7/8 系列瀏覽器不支持 CSS3 的新特性，使得很多開發人員對這 CSS3 新功能望而卻步。本文將詳細介紹如何在
IE 中通過自身的語法方式實現 CSS3 的這些新特性，解決跨瀏覽器編程方面的難題。
-
“提高 web 應用性能之 CSS 性能調優”（developerWorks，2011 年 9 月）：本文紹了 Web 開發中關於 CSS 性能方面需要注意的一些細節，以及編寫 CSS 代碼中需要避免的問題，比如 CSS Expression
的弊端、CSS 縮寫以及 CSS 選擇器的注意事項等，儘可能讓您 Web 應用上的 CSS 代碼運行得順暢。
-
developerWorks Web development 專區：通過專門關於 Web 技術的文章和教程，擴展您在網站開發方面的技能。
-
developerWorks Ajax 資源中心：這是有關 Ajax 編程模型信息的一站式中心，包括很多文檔、教程、論壇、blog、wiki 和新聞。任何 Ajax 的新信息都能在這裏找到。
-
developerWorks Web 2.0 資源中心，這是有關 Web 2.0 相關信息的一站式中心，包括大量 Web 2.0 技術文章、教程、下載和相關技術資源。您還可以通過 Web
2.0 新手入門欄目，迅速瞭解 Web 2.0 的相關概念。
-
查看 HTML5 專題，瞭解更多和 HTML5 相關的知識和動向。
討論
- 加入 developerWorks 中文社區。查看開發人員推動的博客、論壇、組和維基，並與其他 developerWorks 用戶交流。
原文鏈接：http://www.ibm.com/developerworks/cn/web/1202_zhouxiang_css3/#ibm-pcon
