1.私有前綴及其用法
在CSS3模塊標准尚未被W3C批准或者標准所提議的特性尚未被瀏覽器完全實現時，瀏覽器廠商會使用所謂的私有前綴來測試“試驗性的”CSS特性。看看CSS3中實現圓角的代碼：
.round{
-khtml-border-radius:10px; /* Konqueror */
-rim-border-radius:10px; /* RIM */
-ms-border-radius:10px; /* Microsoft */
-o-border-radius:10px; /* Opera */
-moz-border-radius:10px; /* Mozilla (如 Firefox) */
-webkit-border-radius:10px; /* Webkit (如 Safari 和 Chrome) */
border-radius:10px; /* W3C */
}
在實際開發中可以使用可以為CSS文件自動追加前綴的Javascript方案，網址：http://leaverou.github.com/prefixfree。
也可以只指定自己所期望的瀏覽器，例如，如果時間和預算都很緊張，你可能決定不對任何在你的網站上使用率小於3%的瀏覽器提供私有前綴支持。可以查看這個網站：http://caniuse.com，看當前瀏覽器對特定CSS3和HTML5特性的支持程度。還可以查看：http://gs.statcounter.com查看最近的全球瀏覽器器的使用率統計。
2.CSS3的多欄布局和文字換行
1.多欄布局
曾經有需要將一整段文本顯示在多個欄位中，在CSS3出現以前，你必須將內容拆分到不同的標簽中，然后分別設定樣式。利用CSS3可以讓我們將一段或多段內容分布到多列網格中。如下代碼：
<div id="main" role="main">
<p>lloremipsimLoremipsum dolor sit amet,consectetur
//任意文字//
</p>
<p>lloremipsimLoremipsum dolor sit amet,consectetur
//任意文字//
</p>
</div>
具體CSS樣式如下：
（1）可以通過設置欄位寬度（欄位寬度不變，欄位數量會根據瀏覽器自動調整）
#main{
column-width:12em;
}
(2)通過設置欄位數量（欄位數量不變，欄位寬度根據視口自動調整）
#main{
column-count:4;
}
(3)也可以增加欄位間隙和分割線讓多列布局效果更好
#main{
column-gap:2em;
column-rule:thin dotted #999;
column-width:12em;
}
若想參閱CSS3多列布局模塊的標准，請訪問：http://www.w3.org/TR/css3-multicol.
目前，請切記你需要給多列布局聲明使用私有前綴，以確保兼容最廣泛的瀏覽器。
2.文字換行
解決內容過長超出了瀏覽器視口而不換行，導致出現橫向滾軸。
word-wrap:break-word;
3.CSS3的新增選擇器及其用法
1.CSS屬性選擇器
img[alt]{
border:3px dashed #e15f5f;
}
這個選擇器會匹配頁面標簽中任意一個含有alt屬性的圖片標簽。也可以通過設定屬性值來縮小匹配范圍。如下代碼所示：
<img class="oscarMain" src="img/oscar.jpg" alt="atwi_oscar" />
img[alt="atwi_oscar"]{
border:3px dashed #el5f5f;
}
2.CSS3的子字符串匹配屬性選擇器
（1）“匹配開頭”的屬性選擇器。語法如下：
Element[attribute^="value"]
在實際使用中，如果我想選擇網站中所有alt屬性值以film開頭的圖片，則對應代碼如下：
img[alt^="film"]{
border:3px dashed #el5f5f;
}
(2)“匹配包含內容”的屬性選擇器。語法如下：
Element[attribute*="value"]
在實際使用中，如果我想選擇網站中所有alt屬性值中包含film字符串的圖片，則對應代碼如下：
img[alt*="film"]{
border:3px dashed #el5f5f;
}
(3)“匹配結尾”的屬性選擇器。語法如下：
Element[attribute$="value"]
在實際使用中，如果我想選擇網站中所有alt屬性值以film結尾的圖片，則對應代碼如下：
img[alt$="film"]{
border:3px dashed #el5f5f;
}
3.CSS3結構偽類
（1）:last-child選擇器
CSS2.1已經有一個針對列表中第一項的選擇器：li:first-child
CSS3又增加了一個選擇器用以匹配最后一項：li:last-child
組合使用這兩個選擇器，當給li標簽設置樣式時，就不需要在代碼中增加額外的類名了。
（2）nth-child選擇器
*使用整數，如：nth-child(2)-這會選中列表中的第二個選項；
*使用數值表達式
a>：nth-child(3n+1)-這樣會從第一個元素開始，然后每三個元素選一個。
b>：nth-child(3n-2)-這樣會從倒數第2個開始選，然后每三個元素選擇一個。
c>：nth-last-child(-n+3)-這樣會從倒數第3個元素開始，向后選擇之后的所有元素。
*使用奇數，如：nth-child(odd)-這樣會選中li標簽中的所有奇數元素
*使用偶數，如：nth-child(even)-這樣會選中li標簽中的所有偶數元素
*使用類型選擇元素，如：nth-of-type(n)和nth-last-of-type(n)。如下代碼
<ul>
<li class="internal"><a href="#">Why?</a></li>
<li><a href="#">Synopsis</a></li>
<li class="internal"><a href="#">Stills/Photos</a></li>
<li class="internal"><a href="#">Videos/clips</a></li>
<li class="internal"><a href="#">Quotes</a></li>
<li class="internal"><a href="#">Quiz</a></li>
</ul>
注意上面的第二個列表項沒有internal類。看看這個規則：
nav ul li.internal:nth-of-type(n+2) a{
color:#fe0208;
}
上面的代碼告訴瀏覽器：“從第二個匹配元素開始，選擇每一個類名為internal的列表項”。
注：CSS3的計數方式是從1開始的。
（3）.否定（:not）選擇器
nav ul li:not(.internal) a{
color:#fe0208;
}
表示選擇沒有internal類的列表項。
完整的UI元素狀態偽類列表（http://www.w3.org/TR/selectors/#UIstates）
4.對偽元素的修正
偽元素在CSS2中已經存在。CSS3標准對其語法做了一些細微的修正。舉幾個例子，p:fist-line會選中<p>標簽的第一行內容，p:first-letter會選中其中的第一個字母。CSS3要求對偽元素使用兩個冒號以便與偽類進行區別。因此剛才的例子應該改為p::first-letter.但注意Internet Explorer8及更低版本的IE無法識別兩個冒號的語法，它們只識別一個冒號。
::first-line偽元素非常方便的一個特點是它會根據視口自動變化。
4.自定義網頁字體
1.@font-face
在Font Squirrel:http://www.fontsquirrel.com/tools/webfont-generator這個網站下載@font-face(這些字體包括Bebas Neue、Bitstream Vera Sans和Collaborate Thin)，然后解壓。將其放在一個專門的fonts文件夾，該文件夾與css文件夾平級，代碼運用如下：
@font-face{
font-family:'BebasNeueRegular';
src:url('../fonts/BebasNeue-webfont.eot');
src:url('../fonts/BebasNeue-webfont.eot?#iefix');
format('embedded-opentype').
url('../fonts/BebasNeue-webfont.woff') format('woff'),
url('../fonts/BebasNeue-webfont.ttf') format('truetype'),
url('../fonts/BebasNeue-webfont.svg#BebasNeueRegular')
format('svg');
font-weight:normal;
font-style:normal;
}
然后就可以給相關樣式設置正確的字體和粗細了。例如，我想將導航鏈接文字的字體修改為Bebas Neue。代碼如下：
nav ul li a{
font-family:'BebasNeueRegular';
}
替換字體后一般還需要修改字體大小。使用公式：目標元素尺寸÷上下文元素尺寸=百分比尺寸
但是，使用了@font-face設定網站字體后，有時候會引起字體模糊，導致該原因的是字體粗細。大多數瀏覽器都會為標題元素應用標准的font-weight(一般都是700)。因此，解決此方案就是始終為應用了@font-face字體的標題元素設定font-weight屬性。（例如顯示的將font-weight設置為400）.
5.新的CSS3顏色格式和透明度
CSS3允許我們使用新方法如RGB或HSL來聲明顏色。另外，我們還能在這兩個方法后邊追加一個透明通道（分別是RGBA和HSLA）。
1.在CSS中被定義為一個十六進制值#fe0208:
nav ul li:nth-child(odd) a{
color:#fe0208;
}
在CSS3中，該值可以使用RGB值來描述：
nav ul li:nth-child(odd) a{
color:rgb(254,2,8);
}
2.HSL顏色
除了 RGB,CSS3還可使用HSL（色相、飽和度、亮度）模式來聲明顏色。
HSL模式基於一個360º的色相環，如hsl(315,100%,60%)。第一個數字代表色相，60º為黃色，120º時為綠色，180º時為青色，240º時為藍色，300º時為洋紅色，360º時為紅色。其后的兩個值分別表示飽和度和亮度，值為百分比，用於改變基礎的色相。如果想要更加飽滿的顏色，則第二個值使用高一點的百分比即可。最后一個控制亮度，可在0%的全黑到100%的全白之間變化。
3.針對IE6、IE7、IE8提供備用顏色值
nav ul li:nth-child(odd) a{
color:#fe0208;
color:hsl(359,99%,50%);
}
4.透明通道
HSL和RGB支持透明通道。CSS3還允許通過opacity聲明來設置元素的透明度。該透明度的值也是一個介於0和1之間的小數。但是這種方式設置的透明度會對整個元素產生影響（元素的內容都會透明）。反之，使用HSLA或者RGBA則可以僅讓元素的某些部分有透明效果。這樣，一個元素可以帶有HSLA透明效果，但內部的文字仍然不透明。
使用語法如下：
background-color:hsla(0,0%,100%，0.8)；