如何使用CSS3配合IE濾鏡實現(xiàn)漸變和投影的效果

本篇內(nèi)容介紹了“如何使用CSS3配合IE濾鏡實現(xiàn)漸變和投影的效果”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

線性漸變在CSS3和IE濾鏡中的實現(xiàn)
對于完美主義者來說，為了一個漸變而使用一張圖片是一件痛苦的事情，就像有鼻屎不摳掉一樣痛苦= =。所以對于普通的漸變而言，能用CSS解決的就不去動用圖片。
　　CSS3中為我們提供了linear-gradient方法，可以直接對背景設(shè)置漸變。

CSS Code復(fù)制內(nèi)容到剪貼板

1. <!DOCTYPE>   

2. <style>   

3. div {   

4.   width:100px;height:100px;text-align:center;   

5.   font:16px/100px '微軟雅黑';color:#FFF;   

6.   /*以下是CSS3的線性漸變*/  

7.   background:-webkit-linear-gradient(top,#FD0,#C30);   

8.   background:-moz-linear-gradient(top,#FD0,#C30);   

9.   background:-o-linear-gradient(top,#FD0,#C30);   

10. }   

11. </style>   

12. <div>次碳酸鈷</div>  

但是CSS3也是很蛋疼的東西，他需要個瀏覽器前綴。造成了這玩意兒得寫三行。這個方法通常使用三個參數(shù)（也可用更多參數(shù)調(diào)更多色，這個以后再說）。第一個參數(shù)是漸變的方向，top是從上到下，至于left、right、bottom的效果很容易從top推倒出來我就不羅嗦了。CSS3還支持特定角度的漸變，第一個參數(shù)可以用度數(shù)比如45deg就是斜角漸變，但是這東西在IE上實現(xiàn)起來很困難，這里先不多說了。第二第三個參數(shù)是漸變的顏色，這個從代碼上看就一目了然的。CSS3的顏色可以用rgba來實現(xiàn)透明，比如50%透明的紅色：rgba(255,0,0,0.5)，注意透明通道的取值范圍是0到1之間。
　　接下來就說說坑爹的IE，IE下需要通過漸變來實現(xiàn)，對于IE9那半吊子的CSS3我已經(jīng)吐槽無力了，老老實實的用濾鏡比較好。

CSS Code復(fù)制內(nèi)容到剪貼板

1. <!DOCTYPE>   

2. <style>   

3. div {   

4.   width:100px;height:100px;text-align:center;   

5.   font:16px/100px '微軟雅黑';color:#FFF;   

6.   /*以下是IE的線性漸變*/  

7.   filter:progid:DXImageTransform.Microsoft.Gradient(   

8.     StartColorStr=#FFDD00,EndColorStr=#CC3300  

9.   );   

10. }   

11. </style>   

12. <div>次碳酸鈷</div>  

看吧，IE也很容易實現(xiàn)這樣簡單的漸變，雖然代碼長了一些。這里要注意的是濾鏡里的顏色不能用簡單的#HHH去定義，必須寫上完整的六位十六進(jìn)制。如果需要同明度，就在前面加兩位作為透明度，比如50%透明的紅色：#80FF0000。在漸變方向上，IE沒有CSS3那么豐富的方向可以旋轉(zhuǎn)，但是最基本的垂直和水平還是可以做到的。默認(rèn)是從上往下的漸變，可以加上GradientType=1讓漸變變成從左往右的。

CSS Code復(fù)制內(nèi)容到剪貼板

1. div {   

2.   filter:progid:DXImageTransform.Microsoft.Gradient(   

3.     StartColorStr=#FFDD00,EndColorStr=#CC3300,GradientType=1   

4.   );   

5. }  

既然用濾鏡和CSS3都可以兼容實現(xiàn)，那么做個全兼容也就是把上面的方法合并起來而已。

CSS Code復(fù)制內(nèi)容到剪貼板

1. <!DOCTYPE>   

2. <style>   

3. div {   

4.   width:100px;height:100px;text-align:center;   

5.   font:16px/100px '微軟雅黑';color:#FFF;   

6.   /*全兼容線性漸變*/  

7.   background:-webkit-linear-gradient(top,#FD0,#C30);   

8.   background:-moz-linear-gradient(top,#FD0,#C30);   

9.   background:-o-linear-gradient(top,#FD0,#C30);   

10.   filter:progid:DXImageTransform.Microsoft.Gradient(   

11.     StartColorStr=#FFDD00,EndColorStr=#CC3300  

12.   );   

13. }   

14. </style>   

15. <div>次碳酸鈷</div>  

元素投影效果在CSS3和IE濾鏡中的實現(xiàn)
按照慣例，先說說CSS3的投影效果。

CSS Code復(fù)制內(nèi)容到剪貼板

1. <!DOCTYPE>   

2. <style>   

3. div {   

4.   width:100px;height:100px;text-align:center;   

5.   font:14px/100px 微軟雅黑;   

6.   border:1px solid #CCC;   

7.   /*CSS3投影效果*/  

8.   box-shadow:0px 0px 10px #CCC;   

9. }   

10. </style>   

11. <div>次碳酸鈷</div>  

這個box-shadow不需要加瀏覽器兼容頭，我最喜歡這樣的CS3了！IE9雖然也支持CSS3，不過那坑爹貨BUG太多，我不喜歡用IE9的CSS3。就這個投影效果而言，IE9對于設(shè)置了collapse的TABLE元素使用投影會無效?？傊甀E就是各種BUG，不過反正是要兼容到IE6的，就無視IE9的這些半吊子CSS3好了。
　　在IE上實現(xiàn)投影效果還是挺麻煩的，雖然IE有Shadow濾鏡，但是那玩意兒和線性漸變沒區(qū)別，不能達(dá)到CSS3的那種效果。我就不示范了，想知道那玩意兒的效果是什么樣自己試試就好。IE的一大堆濾鏡中只有Blur這個濾鏡可以達(dá)到類似的效果，可是如果把Blur直接用在元素上會讓內(nèi)容也模糊了，所以我們要創(chuàng)建一個新元素對它Blur，讓后再把這個新元素置入原元素的底下作為背景。這就涉及到一堆坐標(biāo)計算，如果居中的元素使用投影效果，還涉及到瀏覽器調(diào)整大小時元素的位移計算。所以IE實現(xiàn)它最好用JS寫。我已經(jīng)把注釋寫的很詳細(xì)了，看這個代碼應(yīng)該就可以明白。

CSS Code復(fù)制內(nèi)容到剪貼板

1. <!DOCTYPE>   

2. <style>   

3. .shadow {   

4.   width:100px;height:100px;text-align:center;   

5.   font:14px/100px 微軟雅黑;   

6.   border:1px solid #CCC;   

7.   background:#FFF;   

8.   position:relative;   

9. }   

10. .shadow-IE {   

11.   display:block;   

12.   position:absolute;background:#CCC;   

13.   filter:progid:DXImageTransform.Microsoft.Blur(pixelRadius=5);   

14. }   

15. </style>   

16. <div class="shadow">次碳酸鈷</div>   

17. <script>   

18. //判斷IE   

19. var isIE=/MSIE/i.test(navigator.userAgent);   

20. if(isIE){   

21.   //獲取全部元素，其實可以用document.all的，不過習(xí)慣這樣寫   

22.   var all=document.getElementsByTagName("*"),s=[],i=0;   

23.   //把class為shadow的元素全放進(jìn)s這個數(shù)組中   

24.   while(o=all[i++])if(o.className=="shadow")s.push(o);   

25.   //遍歷s數(shù)組   

26.   for(i in s){   

27.     //創(chuàng)建一個元素，我習(xí)慣用u，其實用什么都可以   

28.     var o=s[i],u=document.createElement("u");   

29.     //把父元素設(shè)置成相對定位   

30.     o.parentNode.style.position="relative";   

31.     //對IE6、7要加個hasLayout，不然坐標(biāo)計算會出錯   

32.     o.parentNode.style.zoom=1;   

33.     //把創(chuàng)建的元素放到shadow元素的上方   

34.     //一定要是上方，因為下面的元素會擋住上面的元素   

35.     o.parentNode.insertBefore(u,o);   

36.     //給創(chuàng)建的元素應(yīng)用個樣式   

37.     u.className="shadow-IE";   

38.     //把寬度和高度設(shè)置到創(chuàng)建的元素上   

39.     u.style.width=o.offsetWidth+"px";   

40.     u.style.height=o.offsetHeight+"px";   

41.   };   

42.   //當(dāng)窗口改變大小時觸發(fā)   

43.   window.resize=function(){   

44.     //遍歷s數(shù)組   

45.     for(i in s){   

46.       //我們在上面創(chuàng)建的元素移動到需要的位置   

47.       var o=s[i],p=o.previousSibling;   

48.       p.style.top=o.offsetTop-5+"px",   

49.       p.style.left=o.offsetLeft-5+"px";   

50.     };   

51.   };   

52.   //主動觸發(fā)一次這個事件，讓里面的代碼在加載時執(zhí)行一次   

53.   window.resize();   

54. };   

55. </script>  

“如何使用CSS3配合IE濾鏡實現(xiàn)漸變和投影的效果”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！