如何让ie 7 支持box-shadow

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 下面实现的效果图如下:

posted @ 2015-08-11 20:59  前端[色色]  阅读(664)  评论(1编辑  收藏  举报