IE下模拟css3中的box-shadow（阴影…

css3中的box-shadow（阴影）可以查看：http://www.css88.com/archives/2136或者http://www.css88.com/tool/css3Preview/Box-Shadow.html

在ie下模拟css3中的box-shadow（阴影）可以使用ie的Shadow（阴影）滤镜

基本语法：filter: progid:DXImageTransform.Microsoft.Shadow(color=’颜色值’, Direction=阴影角度（数值）, Strength=阴影半径（数值）);

注意：该滤镜必须配合background属性一起使用，否则该滤镜失效。

IE下模拟css3中的box-shadow（阴影）代码：

 

<div style="background: #eee;filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=145, Strength=3);  width: 250px; height: 90px;  -webkit-box-shadow: 2px 2px 3px #969696; -moz-box-shadow: 2px 2px 3px #969696;box-shadow: 2px 2px 3px #969696;"></div>
<div style=" width:500px;filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=5); background-color: #eee; height:200px; margin:0 auto; -moz-box-shadow:2px 2px 5px #969696; -webkit-box-shadow:2px 2px 5px #969696; box-shadow:2px 2px 5px #969696;"></div>

 

 

 

让IE6/IE7/IE8浏览器支持CSS3属性

首先说说.htc文件，.htc文件是个脚本文件，我个人以为与js文件属于同一货色，只是呢，貌似htc是Internet Explorer(IE)的私生子，只有IE才认它。htc文件可以用来描述web行为，web行为允许程序员把自定义的功能“连接”到现有的元素和控件，而不是必须让用户下载二进制文件（例如ActiveX 控件）来完成这个功能。Stop! 别叉远了，点到为止，如果您对htc文件感兴趣，可以参见这里。

本文的这个ie-css3.htc文件看看名字，看看长相就知道是干嘛的了，让IE浏览器支持CSS3的一些属性。没错，就是通过脚本为IE浏览器增加一些CSS3标准下的一些行为（比较流行的几种）。此htc第一段主要脚本如下：

function supportsVml() {
if (typeof supportsVml.supported == "undefined") {
var a = document.body.a(document_createElement_x_x_x('div'));
a.innerHTML = '<v:shape id="vml_flag1" adj="1" />';
var b = a.firstChild;
b.style.behavior = "url(#default#VML)";
supportsVml.supported = b ? typeof b.adj == "object": true;
a.parentNode.removeChild(a);
}
return supportsVml.supported
}

明白人基本上都知道，这不跟js脚本一个模子里出来的嘛。也就是说，htc只是js脚本去韩国整了个容，换了副马甲而已。

本文作者：张鑫旭，来自张鑫旭-鑫空间-鑫生活(http://www.zhangxinxu.com/wordpress/)

本文地址： http://www.zhangxinxu.com/wordpress/?p=783 访问原出处，更多你未见过的前端技术。

三、如何工作的

要说工作原理，得有一个新角色粉墨登场，那就是“VML”。VML是The Vector Markup Language(矢量可标记语言)的缩写。VML用于将图形数据矢量化的标记语言。这是一种基于 XML 语法的语言，由 AutoDesk 、 Macromedia 和 Microsoft 和 HP 公司向 W3C 提出的方案。VML相当于IE里面的画笔，能实现你所想要的图形，而且结合脚本，可以让图形产生动态的效果。VML是微软1999年9月附带IE5.0发布的……关于VML详细知识，您可以点击这里：VML百科

如果要我说的话，我觉得就是IE浏览器的御用画笔，专门给IE作画用的。于是呢IE私生子htc加上IE私有画笔VML就可以实现一些IE专有的图形与表现了，正好可以就此实现一些IE不支持的CSS3效果。

四、如何使用

使用是很容易的，看下面的示例代码：

.box {
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  border-radius: 15px;

  -moz-box-shadow: 10px 10px 20px #000;
  -webkit-box-shadow: 10px 10px 20px #000;
  box-shadow: 10px 10px 20px #000;

  behavior: url(ie-css3.htc);
}

可以看到，除了最后添加了behavior这么一句，CSS3属性还是那个CSS3属性，不需要化妆、修饰或是化身为变形金刚，这也是此方法的优点所在。

本文作者：张鑫旭，来自张鑫旭-鑫空间-鑫生活(http://www.zhangxinxu.com/wordpress/)

本文地址： http://www.zhangxinxu.com/wordpress/?p=783 访问原出处，更多你未见过的前端技术。

五、问题和必要的说明

毕竟不是浏览器自带的属性，使用时遇到问题在所难免，这里说一下一些注意事项，也可以说是方法的局限性吧：

1. 当前元素一定要有定位属性，像是position:relative或是position:absolute属性。
2. z-index值一定要比周围元素的要高，否则……只能说抱歉了~~

本文作者：张鑫旭，来自张鑫旭-鑫空间-鑫生活(http://www.zhangxinxu.com/wordpress/)

本文地址： http://www.zhangxinxu.com/wordpress/?p=783 访问原出处，更多你未见过的前端技术。

六、支持的样式及状态说明

参见下表：

样式	生效	无效
border-radius	为元素四个角设置圆角属性 元素边框	只设置一个角落的圆角属性
box-shadow	模糊大小参数 偏移值	不支持除了黑色(#000)以外的其他颜色
text-shadow	模糊大小参数 偏移值 颜色值	IE下的表现与Firefox/Safari/Chrome有一点点的差异，原因不详

本文作者：张鑫旭，来自张鑫旭-鑫空间-鑫生活(http://www.zhangxinxu.com/wordpress/)

本文地址： http://www.zhangxinxu.com/wordpress/?p=783 访问原出处，更多你未见过的前端技术。

七、实例与演示

我自己做了个demo页面，实现的效果是CSS3的圆角以及投影效果，您可以狠狠地点击这里：IE支持CSS3 demo

以下为IE6浏览器下的效果截图：

八、结语

此htc文件是老外写的，所以要是遇到不知名的问题，可以向我询问，但是我不能保证可以给出一个满意的答复。就这些，祝您好运。

 

原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]

 

 

 

.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;
    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:-5px;
    bottom:-5px;
}

 

<div class="baseBlock">
    <div class="baseBlockIn">昨晚请多玩优秀员工吃饭，聊了几点职场体会。(1) 把自己当老板看，象老板一样拼命干活，能力自然就提高了。有了能力，假如多玩不能给你好的回报，其他公司一定会给。(2) 不是每次付出就一定有回报，但是不断付出就一定会有回报。@李学凌 补充了一点：象你的老板一样思考，能力会提高得更快。 </div>
    <div class="ieShadow"></div>
</div>

还有一句无模糊边缘的滤镜写法

filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=0,Color=#16000000,Positive=true);