讓IE支持CSS3的不完全兼容方案
到Internet Explorer 8為止，IE系列是不支持CSS3的 。在IE中要做一些常用的效果如圓角、陰影，就需要用一些冗余而無意義的元素和圖片來做出這些效果 。在厭倦這些后，就想著用更為簡潔、直接有效、CSS3式的辦法來解決這些問題 。好在就算是飽受批評的Internet Explorer，其本身也是足夠強大的 。IE特有的技術可以很好的實現一些CSS3的效果 。
Opacity透明度
元素的透明度在IE中可以很方便的用濾鏡來實現 。
復制代碼代碼如下:
background-color:green;
opacity: .4;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=40);
border-radius圓角/Box Shadow盒陰影/Text Shadow文字陰影
【讓IE支持CSS3的不完全兼容方案】在IE中可以利用Vector Markup Language (VML)和javascript來實現這些效果 ， ，在引用了一個HTC文件后，在IE瀏覽器中就可以使用這三種CSS3屬性了 。
復制代碼代碼如下:
-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari 、Chrome */
border-radius: 15px; /* Opera 10.5 , IE6使用 IE-CSS3*/
-moz-box-shadow: 5px 5px 5px #000; /* Firefox */
-webkit-box-shadow: 5px 5px 5px #000; /* Safari、Chrome */
box-shadow: 5px 5px 50px #000; /* Opera 10.5，IE6使用 IE-CSS3 */
behavior: url(ie-css3.htc); /*引用ie-css3.htc */
實際上，在IE中有濾鏡來實現陰影(shadow)和投影(drop-shadow)效果的
shadow會產生連續、漸變的陰影
復制代碼代碼如下:
filter: progid:DXImageTransform.Microsoft.Shadow(color=’#000000’, Direction=145, Strength=10);
drop-shadow產生的陰影沒有明暗變化
復制代碼代碼如下:
filter:progid:DXImageTransform.Microsoft.DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1");
濾鏡似乎和現有的htc腳本有沖突，或者可以稱之為特性：兩者同時在一個元素上啟用的時候，濾鏡效果會轉移到其子元素上
Gradients漸變
IE中提供了一個簡單的漸變濾鏡
復制代碼代碼如下:
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’); /* IE6*/
在實現IE中的漸變很簡單
RGBA透明度顏色背景
漸變濾鏡支持RGBA的顏色，startColorStr和EndColorStr的前兩位是Alpha通道值 。使用帶alpha通道來模擬RGBA顏色背景的同時，應該去掉其background-color屬性 。
復制代碼代碼如下:
background-color: rgba(0, 255, 0, 0.6); /* FF3 , Saf3 ,Opera 10.10 , Chrome */
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=’#9900FF00’,EndColorStr=’#9900FF00’); /* IE6 */
Multiple Backgrounds多重背景圖片
支持CSS3多重背景圖片的瀏覽器中可以用下面的語句來實現背景多重圖片：
復制代碼代碼如下:
background: url(bg-image-1.gif) center center no-repeat, url(bg-image-2.gif) top left;
要在IE中實現多背景圖片，在需要在單獨的IE hack樣式表中加入下面的代碼：
復制代碼代碼如下:
background: transparent url(bg-image-1.gif) top left repeat;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src=https://www.questions.com.cn/dnjc/’bg-image-2.gif’, sizingMethod=’crop’); /* IE6*/
CSS3瀏覽器的多重背景
IE的多重背景
Tranformations/rotate旋轉元素
IE中有兩個濾鏡可以實現元素的旋轉，BasicImage和Matrix，前者簡單方便但是只能做90*n(n{1,2,3,4})度的旋轉；Matrix濾鏡功能強大，但是參數復雜 。
復制代碼代碼如下:
-moz-transform: rotate(180deg); /* FF3.5*/
-o-transform: rotate(180deg); /* Opera 10.5 */
-webkit-transform: rotate(180deg); /* Saf3.1 , Chrome */
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
filter:progid:DXImageTransform.Microsoft.Matrix(sizingMethod=’auto expand’,M11=-1, M12=-1.2246063538223772e-16, M21=1.2246063538223772e-16, M22=-1);
旋轉也很簡單
@font-face服務器端字體
考慮到漢字字體的尺寸 ， 這個CSS3的特性不算實用
復制代碼代碼如下:
font-family:’webFont’;
src:url(’myfont.eot’);/*IE6 */
src:local(’fontname’),/*字體名稱*/
url(’myfont.woff’) format(’woff’),/*FF3.6*/
url(’myfont.ttf’) format(’truetype’);/*saf3 ,chrome,FF3.5,opera10 */
字體聲明并引用了以后，可以在網頁的其他地方用font-family使用這一字體 。
可以在同一個元素上啟用多個濾鏡，如：
復制代碼代碼如下:
filter: progid:DXImageTransform.Microsoft.Shadow(color=’#000000’, Direction=145, Strength=5)progid:DXImageTransform.Microsoft.Alpha(opacity=40);
雖然一些用濾鏡模仿CSS3的效果難稱完美，但在一些情況下，運用這些技術能夠讓我們的代碼更為簡潔和統一
