1、序言 我以前曾写过1篇有关完成跨访问器完成box-shadow实际效果的文章内容——“CSS完成跨访问器适配性的盒黑影实际效果”，本文尽管题型相近，可是关键一部分是有差别的。前面的文章内容尽管完成IE下的盒黑影实际效果也是应用的滤镜，可是应用的是shadow滤镜，这类滤镜的实际效果很苍白无力，实际效果过渡不当然，见下图：
而本文完成的IE下的盒黑影实际效果就相对性十分当然，并且还适用内黑影的UI主要表现。究竟是怎样完成的，到底实际效果怎样，请再次访问。
2、访问器纯爷们方式下的适用状况 CSS3 box-shadow特性基础上全部的当代访问器都适用优良。可是要完成跨访问器适用，你必须应用下列特性的全部变体：
•在Opera访问器和IE9和以上版本号访问器中（尽管还在妈妈肚子中），立即应用不带前缀的box-shadow特性
•为适用Firefox访问器，你必须应用-moz-前缀，即-moz-box-shadow
•为适用webkit关键的访问器（如Google Chrome 和 Apple Safari），你必须-webkit-前缀，合起来便是-webkit-box-shadow
•1直至IE8访问器，沒有正宗的适用box-shadow特性的CSS款式，必须应用此外的方式仿真模拟
关键访问器对CSS3 box-shadow特性适用状况1览表
Internet Explorer |
Firefox |
Safari |
Chrome |
Opera |
很久之前
6.0
3.0
3.2
3.0
9.6
不远的以前
7.0
3.5
4.0
4.0
10.10
现阶段
8.0
3.6
5.0
5.0
10.60
将要来临(全新2010)
未来 (2010以后)
9.0
4.0
5.*
6.0
11.0
3、IE实际效果完成密匙 – 模糊不清滤镜
本文完成IE下的盒黑影实际效果的也是依靠于IE滤镜，不一样于“CSS完成跨访问器适配性的盒黑影实际效果⤴”1文中的shadow滤镜，本文完成实际效果的相对路径为模糊不清滤镜，英文名为blur filter⤴，可让IE访问器下的元素边沿模糊不清解决。大家先从最简易的案例刚开始展现：
1个一般的蓝情况div的编码将会是这模样：
<div style="background:blue;height:100px;width:100px;"></div>
实际效果会以下所示：
ok，如今大家对其运用IE模糊不清滤镜，模糊不清尺寸为5像素，結果会如何，这是有关编码：
<div style='background:blue;height:100px;width:100px;
filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=5);
-ms-filter:"progid:DXImageTransform.Microsoft.Blur(pixelradius=5)";'>
</div>
結果在IE访问器下：
如今大概对IE的模糊不清滤镜有了简易直观的了解了，如今重要是怎样将其运用到投射实际效果中呢，这便是下面的关键內容，也是本文最为关键的关键的一部分。
4、完成跨访问器的盒黑影实际效果 针对适用box-shadow特性的访问器要是1层标识便可以搞定了，可是，假如要应用模糊不清滤镜完成IE访问器下的盒黑影实际效果，必须依靠1个“幕后”的标识，这是1个与行为主体标识一样尺寸的div，拥有特殊的情况色（取决于投射的色调），和模糊不清尺寸，因为与行为主体标识尺寸1致，当代访问器不鸟IE独享的filter滤镜，因此，此“幕后”标识的存在针对Firefox、Chrome这类当代访问器的UI主要表现基本上沒有任何危害。
针对当代访问器，大家要完成1个元素的盒黑影实际效果，将会会应用以下的html+CSS编码：
HTML编码：
<div class="baseBlock"></div>
CSS编码：
.baseBlock{
height:100px;
width:100px;
background:#f9f;
box-shadow:10px 10px 5px #000;
-moz-box-shadow:10px 10px 5px #000;
-webkit-box-shadow:10px 10px 5px #000;
}
针对IE访问器，要想完成光滑当然的黑影实际效果，必须依靠1个“幕后”元素，这个元素与“台前”的元素尺寸1致，不一样的是其运用了filter模糊不清滤镜，大家能够有以下款式编码：
HTML编码：
<div class="ieBlock"></div>
CSS编码：
.ieBlock{
height:100px;
width:100px;
background:#000;
filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=10);
-ms-filter:"progid:DXImageTransform.Microsoft.Blur(pixelradius=10)";
}
假如独立显示信息此“幕后”标识，则实际效果以下：
如今大家要做的便是将上面开展合拼，以便更为贴近于具体状况，这里的合拼案例应用略微繁杂点的事例：
1个有文本，高宽比不确定的div标识，以下CSS编码：
.baseBlock{
width:220px;
position:relative;
}
.baseBlockIn{
padding:10px 15px;
background:#a0b3d6;
box-shadow:10px 10px 5px #444;
-moz-box-shadow:10px 10px 5px #444;
-webkit-box-shadow:10px 10px 5px #444;
position:relative;
z-index:1;
}
.ieShadow{
_width:220px;
_height:220px;
filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=5);
-ms-filter:"progid:DXImageTransform.Microsoft.Blur(pixelradius=5)";
background-color:#444\9;
position:absolute;
left:5px;
top:5px;
right:⑸px;
bottom:⑸px;
}
以下html编码：
<div class="baseBlock">
<div class="baseBlockIn">昨晚请多玩出色职工吃饭，聊了几点职场感受。(1) 把自身当老板看，象老板1样拼命干活，工作能力当然就提升了。有了工作能力，倘若多玩不可以给你好的收益，别的企业1定会给。(2) 并不是每次努力就1定有收益，可是持续努力就1定会有收益。@李学凌 填补了1点：象你的老板1样思索，工作能力会提升得更快。 </div>
<div class="ieShadow"></div>
</div>
結果以下图所示（IE7访问器）：
Firefox3.6下：
表明：
1. baseBlockIn的等级要超过ieShadow的等级。
2. 针对高宽比自融入的內容，IE6没法完成，由于IE6没法应用absolute拉伸完成高宽自融入。可是，也并不是沒有处理方式，1是js，获得行为主体內容的高宽比，随后赋给“幕后”投射层；2是立即克隆行为主体內容里边的內容，全封没动地塞给“幕后”黑影层。案例中应用hack给IE6设定了高宽，因此在IE6访问器也是有盒黑影实际效果的，假如高宽去掉是沒有实际效果的，可是IE7+访问器下是沒有这个难题的。
5、内黑影实际效果的完成
依靠于blur滤镜，还能够完成IE下的内黑影实际效果。CSS3 box-shadow中有个inset特性，能够完成内黑影实际效果。因此，完成跨访问器的内黑影实际效果也是将会的。
比如下面的事例，最先是CSS编码：
.baseBlock{
width:220px;
position:relative;
overflow:hidden;
}
.baseBlockIn{
padding:10px 15px;
background-color:#888\9;
box-shadow:inset 30px 30px 20px #888;
-moz-box-shadow:inset 30px 30px 20px #888;
-webkit-box-shadow:inset 30px 30px 20px #888;
}
.ieShadow{
_width:220px;
_height:220px;
filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=20);
-ms-filter:"progid:DXImageTransform.Microsoft.Blur(pixelradius=20)";
background-color:#fff\9;
position:absolute;
top:10px;
left:10px;
bottom:⑴0px;
right:⑴0px;
}
.content{
position:relative;
z-index:1;
}
html编码以下：
<div class="baseBlock">
<div class="baseBlockIn">
<div class="ieShadow"></div>
<div class="content">昨晚请多玩出色职工吃饭，聊了几点职场感受。(1) 把自身当老板看，象老板1样拼命干活，工作能力当然就提升了。有了工作能力，倘若多玩不可以给你好的收益，别的企业1定会给。(2) 并不是每次努力就1定有收益，可是持续努力就1定会有收益。@李学凌 填补了1点：象你的老板1样思索，工作能力会提升得更快。</div>
</div>
</div>
結果以下，最先是IE6访问器：
Firefox3.6下的实际效果以下：
6、结语
IE滤镜时会大大减少网页页面的效率，我感觉除是是非非不可已的状况下，去应用滤镜完成这类适配性的盒黑影实际效果。实际上CSS3的许多特性在IE下全是可使用滤镜完成或是基础完成的。但是，网页页面的状况千差万别，总会免不了遇到非要应用投射实际效果的UI，此时，本文所展现的方式不失为最好挑选之1。
