兼容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)";
}

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

效果圖：

內陰影：

.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;
} 

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

效果圖：

我是內陰影我是內陰影我是內陰影我是內陰影我是內陰影我是內陰影我是內陰影我是內陰影我是內陰影我是內陰影我是內陰影我是內陰影我是內陰影我是內陰影

文章正文已結束，感謝閱讀。如果本文對您有所幫助，請點擊推薦一下。

如果對本文有何建議或疑問請留言或加群討論，前端開發交流群(75701468)

文章屬於原創，如需轉載請注明文章來源，不勝感激。

文章地址：http://www.cnblogs.com/leolai/archive/2013/01/25/2877069.html

蜂眾網,廣州蜂眾網,瀑布流