box-shadow是一个很好用并且也常用的css 3属性,但是,如果我们要保证它能在ie 8及更低的版本下运行的话,需要借助一些其他的插件或文件。在这里我主要讲一下,如何用PIE.htc来解决ie 7不支持box-shadow。
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.box {
width:200px;
height:150px;
border-radius: 10px; /*圆角边框*/
box-shadow: 10px 10px 20px #000; /*阴影*/
position:relative;
z-index:10;
background:#fff;
behavior: url(PIE.htc); /* 关键所在,通知IE浏览器调用脚本*/
}
</style>
</head>
<body>
<div class="box">
注:1.z-index值要比周围元素高;
2. 当前元素要有定位属性,position:relative或position:absolute.
</div>
</body>
</html>
在自己调用PIE.htc的时候一定要注意它的引用位置是否准确,并且当前元素要有定位的属性,同时要保证z-index值要比周围元素高。
PIE.htc文件下载链接地址:点我下载PIE.htc
最终在ie 7 下面实现的效果图如下: