码迷,mamicode.com
首页 > 其他好文 > 详细

如何让ie 7 支持box-shadow

时间:2015-08-11 22:42:01      阅读:121      评论:0      收藏:0      [点我收藏+]

标签:

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

技术分享

如何让ie 7 支持box-shadow

标签:

原文地址:http://www.cnblogs.com/sese/p/4722319.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!