适配ie的内黑影和外黑影完成实际效果及检测编码

日期:2021-01-20 类型:科技新闻 

关键词:公众号小程序,小程序正规价格表,微信群签到小程序,网络抽签小程序,个人做小程序需要什么

有关黑影这个实际效果,IE和W3C都有完成的编码,但实际效果却不统1(以W3C的实际效果为主)。
W3C完成编码:box-shadow: 水平偏位 竖直偏位 黑影模糊不清值 黑影外延值 insert(是不是内黑影);
IE的黑影完成编码:progid:DXImageTransform.Microsoft.Shadow(color=色调, direction=角度, strength=黑影强度);
但IE的黑影看起来有点恶心想吐,并且还不能以设定模糊不清值。能够点一下这里查询
因此,要想实际效果跟W3C的实际效果贴近,能够运用IE滤镜的模糊不清实际效果做到
IE的模糊不清实际效果完成编码:filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=7);
完成基本原理是新建1个层,加模糊不清实际效果做为黑影,完成以下:
外黑影

拷贝编码
编码以下:

.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:⑸px;
top:⑸px;
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:⑸px;
top:⑸px;
right:5px;
bottom:5px;
/* ie6 必须特定宽高 */
_left:⑴5px;
_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>

实际效果图:

上一篇:在ie7下css垂直居中款式text 返回下一篇:没有了