到Internet Explorer 8為止,IE系列是不支持CSS3的。在IE中要做一些常用的效果如圓角、陰影,就需要用一些冗余而無意義的元素和圖片來做出這些效果。在厭倦這些后,就想著用更為簡潔、直接有效、CSS3式的辦法來解決這些問題。好在就算是飽受批評的Internet Explorer,其本身也是足夠強大的。IE特有的技術(shù)可以很好的實現(xiàn)一些CSS3的效果。
Opacity透明度
元素的透明度在IE中可以很方便的用濾鏡來實現(xiàn)。
復制代碼代碼如下:
background-color:green;
opacity: .4;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=40);
border-radius圓角/Box Shadow盒陰影/Text Shadow文字陰影
在IE中可以利用Vector Markup Language (VML)和javascript來實現(xiàn)這些效果,,在引用了一個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中有濾鏡來實現(xiàn)陰影(shadow)和投影(drop-shadow)效果的
shadow會產(chǎn)生連續(xù)、漸變的陰影
復制代碼代碼如下:
filter: progid:DXImageTransform.Microsoft.Shadow(color=’#000000′, Direction=145, Strength=10);
drop-shadow產(chǎn)生的陰影沒有明暗變化
復制代碼代碼如下:
filter:progid:DXImageTransform.Microsoft.DropShadow(Color=”#6699CC”,OffX=”5″,OffY=”5″,Positive=”1″);
濾鏡似乎和現(xiàn)有的htc腳本有沖突,或者可以稱之為特性:兩者同時在一個元素上啟用的時候,濾鏡效果會轉(zhuǎn)移到其子元素上
Gradients漸變
IE中提供了一個簡單的漸變?yōu)V鏡
復制代碼代碼如下:
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+ */
在實現(xiàn)IE中的漸變很簡單
RGBA透明度顏色背景
漸變?yōu)V鏡支持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+*/
新聞熱點
疑難解答