1. 程式人生 > >跨瀏覽器相容css3樣式

跨瀏覽器相容css3樣式

IE9+才開始支援CSS3的一些屬性,而對IE6-IE8我們習慣使用filter濾鏡屬性來進行實現。IE4-IE9都支援濾鏡寫法filter:progid:DXImageTransform.Microsoft.xx(attr1=xx,attr2=xx)
IE8又引入了特殊的-ms-filter,IE認為這種寫法是對舊寫法的一次更正,更符合規範,這個寫法的屬性值只是多了一對引號,效果同前:

-ms-filter:"progid:DXImageTransform.Microsoft.xx(attr1=xx,attr2=xx)"

需要宣告的是,如果你要同時使用filter和-ms-filter,請將-ms-filter寫在filter的前面。


不過,這種寫法的壽命也不長,到IE10對filter與-ms-filter都已經不再支援。
IE 從4.0版開始,就提供了一些內建的多媒體濾鏡特效,具體的使用方法是:
語法
filter : filters 

引數
filters :  要使用的濾鏡效果。多個濾鏡之間用空格隔開。

說明
設定或檢索物件所應用的濾鏡效果。
要使用該屬性,物件必須具有height,width,position三個屬性中的一個。
濾鏡的機制是可擴充套件的。可以開發和使用第三方濾鏡。
該屬性在MAC平臺上不可用。
對應的指令碼特性為filter。
IE4.0以上版本,支援以下14種濾鏡:
濾鏡名    說明
Alpha     讓HTML元件呈現出透明的漸進效果
Blur     讓HTML元件產生風吹模糊的效果
Chroma     讓影象中的某一顏色變成透明色
DropShadow     讓HTML元件有一個下落式的陰影
FlipH     讓HTML元件水平翻轉
FlipV     讓HTML元件垂直翻轉
Glow     在元件的周圍產生光暈而模糊的效果
Gray     把一個彩色的圖片變成黑白色
Invert     產生圖片的照片底片的效果
Light     在HTML元件上放置一個光影
Mask     利用另一個HTML元件在另一個元件上產生影象的遮罩
Shadow     產生一個比較立體的陰影
Wave     讓HTML元件產生水平或是垂直方向上的波浪變形
XRay     產生HTML元件的輪廓,就像是照X光一樣


一、陰影 box-shadow

/*標準瀏覽器*/
box-shadow: 0px 0px 3px #333;
/*firefox*/
-moz-box-shadow: 0px 0px 3px #333;
/*chrome*/
-webkit-box-shadow: 0px 0px 3px #333;
/*ie 8*/
background: #fff; //使用這個避免設定字型陰影
-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(color=#bbbbbb,direction=180,strength=4)";
或
filter:progid:DXImageTransform.Microsoft.Shadow(color=#bbbbbb,direction=180,strength=4);
/*ie7*/
background: #fff; //使用這個避免設定字型陰影
filter:progid:DXImageTransform.Microsoft.Shadow(color=#bbbbbb,direction=180,strength=4);
或
filter:shadow(color=#bbbbbb,direction=180,strength=4);

Shadow濾鏡的基本語法:


filter:progid:DXImageTransform.Microsoft.Shadow(color=#bbbbbb,direction=180,strength=4);
color代表投影的底色,該數值可用英文或16進製表示, 例如投影底色是藍色的話,就應該設定color=blue或#000000。
direction引數是用來設定投影方向的,0代表上,90代表右,180代表下,270代表左,此外該數值45度為單位,它的預設值是向左的270度。
strength引數設定陰影向外擴散距離。


若四個方向都想留出陰影,則可寫成:
filter: progid:DXImageTransform.Microsoft.Shadow(color=#bbbbbb,direction=0,strength=4) 
          progid:DXImageTransform.Microsoft.Shadow(color=#bbbbbb,direction=90,strength=4) 
          progid:DXImageTransform.Microsoft.Shadow(color=#bbbbbb,direction=180,strength=4)
          progid:DXImageTransform.Microsoft.Shadow(color=#bbbbbb,direction=270,strength=4); 

二、選擇器nth-child()

css3的子孩子選擇器ie8識別不了,可以使用 xx :first-child + xx 代替使用
/* equivalent to li:nth-child(1) */
ul li:first-child a {
    border-top: 5px solid red;
}
/* equivalent to li:nth-child(2) */
ul li:first-child + li a {
    border-top: 5px solid blue;
}
/* equivalent to li:nth-child(3) */
ul li:first-child + li + li a {
    border-top: 5px solid green;
}​