随着浏覽器的更新，css3已經可以投入實際應用了。
以下就是這些寫法的詳細介紹。所有代碼都經過了firefox 3.6和ie 8.0的驗證，原文的錯誤之處也已得到改正。
一、圓角（rounded corner）
.box_round { -moz-border-radius: 30px; /* ff1+ */ -webkit-border-radius: 30px; /* saf3+, chrome */ border-radius: 30px; /* opera 10.5, ie 9 */ }
圓角的實作比較簡單，隻要設好一個半徑值就可以了。遺憾的是，目前所有的ie都不支援css圓角，要等到ie 9才行。
二、盒狀陰影（box shadow）
.box_shadow { -moz-box-shadow: 3px 3px 4px #ffffff; /* ff3.5+ */ -webkit-box-shadow: 3px 3px 4px #ffffff; /* saf3.0+, chrome */ box-shadow: 3px 3px 4px #ffffff; /* opera 10.5, ie 9.0 */ filter: progid:dximagetransform.microsoft.dropshadow(offx=3px, offy=3px, color='#ffffff'); /* ie6,ie7 */ -ms-filter: "progid:dximagetransform.microsoft.dropshadow(offx=3px, offy=3px, color='#ffffff')"; /* ie8 */
-moz-box-shadow、-webkit-box-shadow和box-shadow的設定是一樣的，都有4個參數，含義分别為：x軸偏移值、y軸偏移值、陰影的模糊度、以及陰影顔色。
ie 6~8使用其獨有的濾鏡，需要設定三個參數：offx（x軸偏移值）、offy（y軸偏移值）、color（陰影顔色）。
三、線性漸變（gradient）
.box_gradient { background-image: -moz-linear-gradient(top, #444444, #999999); /* ff3.6 */ background-image: -webkit-gradient(linear,left top, left bottom, color-stop(0, #444444),color-stop(1, #999999)); /* saf4+, chrome */ filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#444444', endcolorstr='#999999', gradienttype='0'); /* ie6,ie7 */ -ms-filter: "progid:dximagetransform.microsoft.gradient(startcolorstr='#444444', endcolorstr='#999999',gradienttype='0')"; /* ie8 */
先看firefox。
-moz-linear-gradient(top, #444444, #999999);
-moz-linear-gradient有三個參數。第一個參數表示線性漸變的方向，top是從上到下、left是從左到右，如果定義成left top，那就是從左上角到右下角。第二個和第三個參數分别是起點顔色和終點顔色。你還可以在它們之間插入更多的參數，表示多種顔色的漸變。
-webkit-gradient(linear,left top, left bottom, color-stop(0, #444444),color-stop(1, #999999));
-webkit-gradient是webkit引擎對漸變的實作，一共有五個參數。第一個參數表示漸變類型（type），可以是linear（線性漸變）或者radial（輻射漸變）。第二個參數和第三個參數，都是一對值，分别表示漸變起點和終點。這對值可以用坐标形式表示，也可以用關鍵值表示，比如left top（左上角）和left bottom（左下角）。第四個和第五個參數，分别是兩個color-stop函數。color-stop函數接受兩個參數，第一個表示漸變的位置，0為起點，0.5為中點，1為結束點；第二個表示該點的顔色。
dximagetransform.microsoft.gradient(startcolorstr='#444444', endcolorstr='#999999', gradienttype='0');
ie依靠濾鏡實作漸變。startcolorstr表示起點的顔色，endcolorstr表示終點顔色。gradienttype表示漸變類型，0為預設值，表示垂直漸變，1表示水準漸變。
四、透明（opacity）
正常情況下，上層的對象會覆寫下層的對象。
但是，如果将上層對象的顔色變為透明，就可以透過它看到下層對象。
.box_rgba { background-color: #b4b490; background:transparent; filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#99b4b490',endcolorstr='#99b4b490'); /* ie6,ie7 */ -ms-filter: "progid:dximagetransform.microsoft.gradient(startcolorstr='#99b4b490',endcolorstr='#99b4b490')"; /* ie8 */ zoom: 1; background-color: rgba(180, 180, 144, 0.6); /* ff3+, saf3+, opera 10.10+, chrome */
先看第一行。
background-color: #b4b490;
這是設定對象的預備色，也就是不透明時的顔色。如果浏覽器不支援透明，就将顯示這個顔色。
background:transparent; filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#99b4b490',endcolorstr='#99b4b490'); /* ie6,ie7 */ -ms-filter: "progid:dximagetransform.microsoft.gradient(startcolorstr='#99b4b490',endcolorstr='#99b4b490')"; /* ie8 */ zoom: 1;
這幾行是專門為ie寫的，其中主要用到 dximagetransform.microsoft.gradient濾鏡。我們要為它設定起點色（startcolorstr）和終點色（endcolorstr）。在單色透明的情況下，這兩個值是相同的。需要注意的是，它們的取值是一個八位的十六進制值，前兩位表示alpha通道值，00表示完全透明，ff表示完全不透明；後六位則是這個顔色的rgb值。
background-color: rgba(180, 180, 144, 0.6);
除了ie，其他浏覽器幾乎都支援rgba函數。它有四個參數，前三個為一種顔色的rgb值，第四個為透明度，這裡設為0.6。
五、旋轉（rotation）
.box_rotate { -moz-transform: rotate(7.5deg); /* ff3.5+ */ -o-transform: rotate(7.5deg); /* opera 10.5 */ -webkit-transform: rotate(7.5deg); /* saf3.1+, chrome */ filter: progid:dximagetransform.microsoft.matrix(m11=0.9914,m12=-0.1305,m21=0.1305,m22=0.9914,sizingmethod='auto expand'); -ms-filter: "progid:dximagetransform.microsoft.matrix(m11=0.9914,m12=-0.1305,m21=0.1305,m22=0.9914,sizingmethod='auto expand')"; /* ie8 */
除了ie以外，其他浏覽器都是用rotate函數，實作某個對象的旋轉。比如rotate(7.5deg)就表示順時針旋轉7.5度（degree）。
ie則需要用到一個複雜的濾鏡dximagetransform.microsoft.matrix。它一共接受五個參數，前四個參數需要自行計算三角函數，然後分别寫成m11 = cos(rotation),m12 = -sin(rotation),m21 = sin(rotation),m22 = cos(rotation)，其中的rotation表示旋轉角度，如果順時針旋轉7.5度，則rotation就為7.5；第五個參數sizingmethod表示重繪方式，'auto expand'代表自動擴充到新的邊界。
除了這個濾鏡，ie還有一個稍微簡單一點的濾鏡dximagetransform.microsoft.basicimage(rotation=x)。其中的x隻能取值為1，2，3，0，分别表示順時針選擇90度、180度、270度和360度。
六、伺服器端字型（font-face）
設計網頁的時候，可能會用到某種特殊的字型。如果使用者的機器中沒有安裝，文字隻能以普通字型顯示。
這時可以讓使用者的浏覽器自行下載下傳伺服器端字型，然後就能呈現出設計者想要的效果。
@font-face { font-family: 'myfont'; src: url('myfont.eot'); /* ie6+ */ src: local('myfont.ttf'), url('myfont.woff') format('woff'), /* ff3.6 */ url('myfont.ttf') format('truetype'); /* ff3.5+, saf3+,chrome,opera10+ */
第一行代碼：
font-family: 'myfont';
表示為這種字型起一個名稱，可以随意設定，我這裡用的是myfont。
src: url('myfont.eot');
src: local('myfont.ttf'), url('myfont.woff') format('woff'), url('myfont.ttf') format('truetype');
local()表示在本機（用戶端）查找該字型，如果本機已經安裝了，就不用下載下傳了。url()表示字型在伺服器上的位置，format()用來說明字型格式。firefox 3.5支援truetype和opentype字型，firefox 3.6又增加了woff字型。其他基于webkit引擎的浏覽器（sarif，opera、chrome），目前好像隻支援truetype。
然後，使用的時候這樣寫就可以了。
h2{ font-family: "myfont"; }
需要注意的是，字型檔案必須與網頁檔案來自同一個域名，符合浏覽器的"同源政策"。另外，由于中文字型檔案太大，伺服器端字型顯然隻适用于英文字型。
七、其他
利用css3，還可以完成transform（變形），包括skew（扭曲）和scale（縮放），以及css transitions（動态變換）。這些内容待以後再補充。
（完）