相容ie的內陰影和外陰影的實現效果及測試代碼

這篇文章主要介紹了關於相容ie的內陰影和外陰影實現效果及測試代碼，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

關於陰影這個效果，IE和W3C都有實現的代碼；本文介紹一下W3C實現陰影製作效果與ie陰影製作效果的實現與IE的模糊效果的實現，感興趣的朋友可以瞭解下，希望本文對你有所協助

關於陰影這個效果，IE和W3C都有實現的代碼，但效果卻不統一(以W3C的效果為主)。
W3C實現代碼：box-shadow: 水平位移 垂直位移 陰影模糊值 陰影外延值 insert(是否內陰影);
IE的陰影實現代碼：progid:DXImageTransform.Microsoft.Shadow(color=顏色, direction=角度, strength=陰影強度);
但IE的陰影看起來有點噁心，而且還不可以設定模糊值。可以點擊這裡查看
所以，要想效果跟W3C的效果接近，可以利用IE濾鏡的模糊效果達到
IE的模糊效果實現代碼：filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=7);
實現原理是建立一個層，加模糊效果作為陰影，實現如下：
外陰影：

.outer{ position:relative; font-size:0; width:182px; height:137px; margin:0 0 50px 5px; } .outer .w3cShadow { position:relative; border:1px solid #000; box-shadow: 0 0 10px #000000; } .outer .ieShadow{ display:none; display:block\9; background:#000\9; /* ie78 通過定位自適應寬高 */ position:absolute; left:-5px; top:-5px; right:5px; bottom:5px; /* ie6 需要指定寬高 */ _width:182px; _height:137px; filter:progid:dXImageTransform.Microsoft.blur(pixelradius=5); /* for ie8 標準模式 */ -ms-filter:"progid:DXImageTransform.Microsoft.Blur(pixelradius=5)"; }

<p class="outer"> <p class="ieShadow"><!--利用IE濾鏡模糊效果類比陰影--></p> <p class="w3cShadow"> <img src="../images/rose.jpg" width="180" height="135"> </p> </p>

：

內陰影：

.inner{ position:relative; width:182px; font-size:14px; margin:0 0 50px 5px; } .inner .w3cShadow { position:relative; background:#000\9; padding:10px; border:1px solid #000; box-shadow: 0 0 10px #000000 inset; } .inner .ieShadow{ display:none; display:block\9; background:#fff\9; /* ie78 通過定位自適應寬高 */ position:absolute; left:-5px; top:-5px; right:5px; bottom:5px; /* ie6 需要指定寬高 */ _left:-15px; _width:180px; _height:132px; filter:progid:dXImageTransform.Microsoft.blur(pixelradius=5); /* for ie8 標準模式 */ -ms-filter:"progid:DXImageTransform.Microsoft.Blur(pixelradius=5)"; } .inner .content{ position:relative; z-index:1; }

<p class="inner"> <p class="w3cShadow"> <p class="ieShadow"><!--利用IE濾鏡模糊效果類比陰影--></p> <p class="content"> 我是內陰影我是內陰影我是內陰影我是內陰影我是內陰影我是內陰影我是內陰影我是內陰影我是內陰影我是內陰影我是內陰影我是內陰影我是內陰影我是內陰影 </p> </p> </p>

：

以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！