Opacity 透明度
透明度屬性是 CSS 中非常常用和流行的一個屬性，目前已經廣泛被主要浏覽器支持，可惜的是 IE6/7/8 均不支持該屬性。雖然 IE 沒有支持這個 CSS 屬性，但是我們可以通過使用 IE 特有的濾鏡 filter 屬性來實現相同效果。
清單 1. Opacity 代碼示例
opacity: 0.4; /*Chrome、Safari、Firefox、Opera */ filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* IE6/IE7/8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /* IE8 */
如上面代碼所示，第一行是在其他浏覽器中使用 Opacity 屬性；第二行是 IE6/7/8 中使用濾鏡屬性設置透明度；第三行是新的 IE 濾鏡屬性，它只在 IE8 中起作用在其他浏覽器中會被忽略，如果不是針對 IE8 設置，使用第二行代碼就可以了。參數的設置與 CSS 中 Opacity 屬性也基本相同，在 IE 濾鏡中使用 0-100 表示透明度，因此 opacity=40 相當於 Opacity 屬性為 0.4，亦即透明度為 40%。使用該濾鏡屬性有兩個缺點：由於使用了 Microsoft 特有的屬性，會使得你的 CSS 非驗證的；另外，IE 的濾鏡屬性會使得所有的 HTML 子節點都繼承這個屬性。
圖 1.IE 浏覽器中透明度演示
Border-Radius 圓角效果
圓角效果是 CSS3 中另一個非常常用和流行的效果。它使得程序員不再需要費力的拼裝很多圓角圖片或者使用大量復雜的 JavaScript 來實現的相同的效果。在很大程度上圓角屬性簡化了 HTML 代碼結構，同時優化了顯示效果。然而 IE 全系列浏覽器依然不支持這個屬性。幸運的是 Remiz Rahnas使用 VML 編寫了一個 HTC 文件，為 IE 浏覽器提供圓角效果的支持。
清單 2. 圓角代碼示例
-moz-border-radius: 15px; /*Firefox*/ -webkit-border-radius: 15px; /*Safari、Chrome*/ border-radius: 15px; /*Opera 10.5+、IE 6+*/ behavior: url(ie-css3.htc); /* 調用腳本添加圓角效果 */
如上面代碼所示，圓角屬性的使用和 CSS 圓角屬性一致，只是在後面多添加了一句 behavior: url(ie-css3.htc)。behavior 屬性只被 IE 浏覽器支持和識別，用來告訴 IE 在哪些設置了該樣式 Class 的元素上調用腳本添加圓角效果。一句簡潔的代碼就使得 IE 支持圓角效果，而不需要你額外的維護任何代碼。然而這種折中的方法也有一些缺陷：首先，在 Server 端需要引入一個 HTC 文件，經過 gzip 壓縮後對 server 端和 client 端性能應該不會有太大的影響；其次，它會使你的 CSS 驗證不合法；另外，這個腳本在 IE8 上有一些問題，它會使 z-index 值變成負數。因此使用時還需要小心。
圖 2.IE 浏覽器中圓角效果演示
Box Shadow 盒陰影
盒陰影是另一個 CSS3 中的很有用的屬性，它使得程序員可以通過簡單的添加一個屬性，就創建出一個立體效果帶有陰影的元素。在 IE 全系列浏覽器中依然在不支持這個屬性，但 IE 為這個效果提供了濾鏡屬性；另外和上面圓角效果一樣，我們可以通過 VML 腳本來實現這個效果。
清單 3.Box Shadow 的濾鏡實現代碼
-moz-box-shadow: 2px 2px 3px #969696; /* Firefox 3.5+ */ -webkit-box-shadow: 2px 2px 3px #969696; /* Safari and Chrome */ filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=145, Strength=3);
清單 4.Box Shadow 的 VML 腳本實現
-moz-box-shadow: 2px 2px 3px #969696; /* Firefox */ -webkit-box-shadow: 2px 2px 3px #969696; /* Safari and Chrome */ box-shadow: 2px 2px 3px #969696; /* Opera 10.5+、IE6+*/ behavior: url(ie-css3.htc); /* 調用腳本添加陰影效果 */
如上面代碼所示，上面兩種方法均可實現這個效果。但是要注意的是，IE 濾鏡效果語法與其他浏覽器中 CSS3 屬性語法不同。因此需要開發人員仔細調試使得在不同浏覽器中看起來有相同的效果。
圖 3.IE 浏覽器中盒陰影效果演示
Text Shadow
文字陰影在不僅流行於打印效果中，同時也在 Web 設計中也非常流行。然而對於 Text Shadow 這個屬性我們就沒有那麼好運氣了，IE 沒有提供相應的濾鏡效果，也沒有現成的 VML 腳本可以使用。在過去的 Web 開發中，我們通常使用圖片來實現文字陰影效果。Kilian Valkhof為了解決 IE 下實現文字陰影這個難題，而編寫了一個 jQuery 的插件。
清單 5.IE 浏覽器中實現 Text Shadow 效果代碼
text-shadow: #aaa 5px 5px 8px;
$(document).ready(function(){
$(".text-shadow").textShadow();
});
如上面代碼所示，下載了 jQuery 核心包和 Drop Shadow 插件後我們就可以在 IE 中使用文字陰影效果了。textShadow() 方法還可以填入一個 JavaScript 對象參數，如下表所示：
表 1.textShadow 屬性參數表
圖 4.Text Shadow 演示圖
Gradients 漸變色
CSS3 中的漸變色為漸變背景色提供了很大的方便，我們不必為了漸變的背景色使用大量細小的圖片，同時也不用為了適應浏覽器分辨率做很多工作。盡管 IE 浏覽器還是不支持該屬性，我們依然可以通過 IE 是由的濾鏡屬性實現該效果。
清單 6.IE 浏覽器中實現漸變色
background-image: -moz-linear-gradient(top, #81a8cb, #4477a1); /* Firefox 3.6 */ background-image: -webkit-gradient(linear,left bottom,left top, color-stop(0, #4477a1),color-stop(1, #81a8cb)); /* Safari & Chrome */ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#81a8cb', endColorstr='#4477a1'); /* IE6 & IE7 */ -ms-filter:"progid:DXImageTransform.Microsofkt.gradient(GradientType=0, startColorstr='#81a8cb', endColorstr='#4477a1')"; /* IE8 */
如上面代碼所示，我們可以使用 IE 的私有的濾鏡來實現該效果。其中 GradientType 可以有兩個選項值 0 和 1，分別代表水平漸變和垂直漸變。startColorstr 和 endColorstr 分別代表漸變開始的顏色值和結束的顏色值。雖然參數和功能不如 CSS3 中的漸變多，但是對已一般的需求來說也算夠用了。另外該濾鏡屬性在 IE6/7 和 IE8 中支持的語法不相同，因此我們需要寫不同的代碼去做 IE6/7 和 IE8 的兼容處理。
圖 5.IE 浏覽器漸變色演示
RGBA 顏色
CSS3 中提供了另一種方式設置背景透明度，那就是 RGBA 顏色。RGBA 顏色使得開發人員在指定顏色時，不僅可以指定 R、G、B 三原色的值，同時還可以指定顏色的透明度。這樣我們就就可以在浏覽器中實現類似 Windows7 中一樣透明的玻璃效果，這大大增強了 Web 程序的視覺感官體驗。在 IE 全系列浏覽器中依然不支持 RGBA 顏色，我們只能利用 IE 濾鏡模擬實現這樣的效果。
清單 7.IE 浏覽器 RGBA 顏色實現代碼
background: rgba(50, 95, 224, .4); filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#886287a7', endColorstr='#886287a7');
如上面代碼所示，利用 IE 中漸變色濾鏡將漸變開始顏色和結束顏色設置相同，能模擬出和其他浏覽器十分類似的 RGBA 顏色效果。另外為了在 IE 中獲得較好的透明背景效果，使用 PNG 圖片作為背景圖片也是一個很不錯的選擇。不過這樣做的缺點是你不得不處理大量的圖片，同時為了適應圖片背景不得不修改 HTML 的結構。
圖 6.IE 浏覽器中濾鏡實現 RGBA 顏色效果
Rotation 旋轉
在最新的 Firefox 和 Webkit 浏覽器中都對 CSS3 形變和動畫效果做了不同程度的支持。你可以旋轉、拉伸、平移一個 HTML 元素來實現以前只能用圖片實現的立體效果，也可以使用 CSS 屬性來實現絢麗的淡入、淡出等動畫效果。目前 IE 全系列浏覽器還不支持該屬性，但是很少有人知道使用 IE 的濾鏡可以實現簡單的 HTML 元素旋轉的效果。
清單 8.IE 浏覽器中實現旋轉
-webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
如上面代碼所示，最後一行代碼在 IE 中實現旋轉效果。其中的參數 rotation 的選項為 1、2、3 和四，分別代表旋轉 90 度、180 度、270 度和 360 度。和 CSS3 中的旋轉 360 度功能相比，IE 中的旋轉濾鏡功能就顯得十分有限了，每次 90 度的旋轉很難滿足開發人員的需求。
另外 dojo 在 1.5 版本對 CSS3 中的 transform 屬性開始有一定的支持，其中包括了 matrix、rotate、skew、scale、translate 等功能。如果有 CSS3 形變需求的話，可以參考使用 dojo 對這部分功能的擴展。
清單 9. 使用 dojo 設置 HTML 元素旋轉
dojox.html.ext-dojo.style("transform","rotate(10deg)");
圖 7.IE 浏覽器中濾鏡實現 HTML 元素旋轉
小結
CSS3 雖然還沒有正式發布，但是各個浏覽器廠商已經開始部分支持這些新特性了。這些新特性的支持給我來帶了很多驚喜，使我們很容易實現我們意想不到的華麗的效果，簡化了很多前端實現的代碼。但是 CSS3 也給我們帶來了很多困擾，各個浏覽器廠商對 CSS3 標准支持不一致，尤其是特立獨行的 IE 給開發人員帶來更多的麻煩。為了實現 Web 程序的跨浏覽器和顯示的一致性，我們不得不花費很多時間在各個浏覽器差異的調試上。本文針對部分 IE 不支持的 CSS3 效果以及在 IE 浏覽器上的替代方案做了詳細的介紹。希望能為廣大開發者在未來的開發工作中提供一點啟示。