CSS3中Opacity透明度等一些特效

Opacity 透明度
透明度屬性是 CSS 中非常常用和流行的一個屬性，目前已經廣泛被主要瀏覽器支援，可惜的是 IE6/7/8 均不支援該屬性。雖然 IE 沒有支援這個 CSS 屬性，但是我們可以通過使用 IE 特有的濾鏡 filter 屬性來實現相同效果。
建議IE下的濾鏡CSS在頭部這樣寫

1 2 3

<!--[if IE]>      <link rel="stylesheet" href="css/ie.css"> <![endif]-->

以下用的代碼都可寫在ie.css中 IE瀏覽器中透明度

程式碼範例

1 2 3

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 子節點都繼承這個屬性。 border-radius 圓角效果

程式碼範例

1 2 3 4

-moz-border-radius:  15px ;  /*Firefox*/   -webkit-border-radius:  15px ;  /*Safari、Chrome*/   border-radius:  15px ;  /*Opera 10.5+、IE 6+*/   behavior:  url (ie-css 3 .htc);  /* 呼叫指令碼添加圓角效果 指令檔自行搜尋下載*/

圓角效果是 CSS3 中另一個非常常用和流行的效果。它使得程式員不再需要費力的拼裝很多圓角圖片或者使用大量複雜的 JavaScript 來實現的相同的效果。在很大程度上圓角屬性簡化了 HTML 程式碼結構，同時最佳化了顯示效果。然而 IE 全系列瀏覽器依然不支援這個屬性。幸運的是 Remiz Rahnas使用 VML 編寫了一個 HTC 檔案，為 IE 瀏覽器提供圓角效果的支援。 Box Shadow 盒陰影

Box Shadow 的濾鏡實現代碼

1 2 3

-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 );

Box Shadow 的 VML 指令碼實現

1 2 3 4

-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-css 3 .htc);  /* 呼叫指令碼添加陰影製作效果 */

面兩種方法均可實現這個效果。但是要注意的是，IE 濾鏡效果文法與其他瀏覽器中 CSS3 屬性文法不同。因此需要開發人員仔細調試使得在不同瀏覽器中看起來有相同的效果。 Text Shadow文本陰影

文字陰影在不僅流行於列印效果中，同時也在 Web 設計中也非常流行。然而對於 Text Shadow 這個屬性我們就沒有那麼好運氣了，IE 沒有提供相應的濾鏡效果，也沒有現成的 VML 指令碼可以使用。在過去的 Web 開發中，我們通常使用圖片來實現文字陰影製作效果。Kilian Valkhof為瞭解決 IE 下實現文字陰影這個難題，而編寫了一個 jQuery 的外掛程式。
IE 瀏覽器中實現 Text Shadow 效果代碼

1 2 3 4

text-shadow :  #aaa 5px 5px 8px ;   $(document).ready(function(){   $( ".text-shadow" ).textShadow();   });<

下載了 jQuery 核心包和 Drop Shadow 外掛程式後我們就可以在 IE 中使用文字陰影製作效果了。textShadow() 方法還可以填入一個 JavaScript 對象參數，如下所示：

屬性名稱類型預設值預設值

left	整型	4	陰影距離
布爾	整型	4	陰影角度
blur	整型	2	陰影擴散度
opacity	0-1 小數	0.5	陰影透明度
color	顏色值	black	字型陰影顏色
swap	布爾	false	是否換行

漸層色

CSS3 中的漸層色為漸層背景色提供了很大的方便，我們不必為了漸層的背景色使用大量細小的圖片，同時也不用為了適應瀏覽器解析度做很多工作。儘管 IE 瀏覽器還是不支援該屬性，我們依然可以通過 IE 是由的濾鏡屬性實現該效果。
IE瀏覽器中實現漸層色代碼

1 2 3 4 5 6 7

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 的相容處理。 IE瀏覽器中濾鏡實現RGBA 顏色效果

CSS3 中提供了另一種方式設定背景透明度，那就是 RGBA 顏色。RGBA 顏色使得開發人員在指定顏色時，不僅可以指定 R、G、B 三原色的值，同時還可以指定顏色的透明度。這樣我們就就可以在瀏覽器中實作類別似 Windows7 中一樣透明的半透明效果，這大大增強了 Web 程式的視覺感官體驗。在 IE 全系列瀏覽器中依然不支援 RGBA 顏色，我們只能利用 IE 濾鏡類比實現這樣的效果。
IE瀏覽器RGBA顏色實現代碼

1 2	background : rgba( 50 ,  95 ,  224 , . 3 ); filter:progid:DXImageTransform.Microsoft.gradient(GradientType= 0 ,startColorstr= '#4B6287a7' , endColorstr= '#4B6287a7' );

DXImageTransform.Microsoft.gradient濾鏡裡的startColorstr參數值是#AARRGGBB形式的，其中的AA是代表不透明度的十六進位，00表示完全透明，FF就是全不透明，化成十進位的範圍就是0~255，剩下的RRGGBB就是顏色的十六進位代碼。例子中background: rgba(125, 0, 0, .3);表示的是30%不透明度的紅色背景。如何把30%的不透明度轉換成十六制呢。很簡單，先計算#AA的的十進位x，x/255 = 3/10，解