欧美日韩国产一区二区|qovd片|小明个人发布看看|小浪货你夹真紧水又多|老头把我添高潮了A片故|99热久久精品国产一区二区|久久久春色AV

  1. 首頁 > 生活經驗 > >

兼容ie的內陰影和外陰影實現(xiàn)效果及測試代碼

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

復制代碼代碼如下:
.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:block9;
background:#0009;
/* 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="https://www.questions.com.cn/images/rose.jpg" width="180" height="135"
/div
/div

效果圖：

兼容ie的內陰影和外陰影實現(xiàn)效果及測試代碼

【兼容ie的內陰影和外陰影實現(xiàn)效果及測試代碼】
內陰影：

復制代碼代碼如下:
.inner{
position:relative;
width:182px;
font-size:14px;
margin:0 0 50px 5px;
}
.inner .w3cShadow {
position:relative;
background:#0009;
padding:10px;
border:1px solid #000;
box-shadow: 0 0 10px #000000 inset;
}
.inner .ieShadow{
display:none;
display:block9;
background:#fff9;
/* 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

效果圖：

兼容ie的內陰影和外陰影實現(xiàn)效果及測試代碼

相關經驗推薦