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

如何让ie 7 支持box-shadow相关推荐

Box Shadow阴影和圆角
一.盒子写Box Shadow阴影:如 box-shadow:2px 2px 5px #120F0B; //支持Opera浏览器 -moz-box-shadow:2px 2px 5px #120F0B ...
CSS3 Box Shadow
语法: box-shadow:1px 2px 3px #FFF; box-shadow:阴影水平偏移值(可取正负值): 阴影垂直偏移值(可取正负值):阴影模糊值:阴影颜色: 兼容性 Firefox支持 ...
html中投影效果图,利用CSS3（box shadow）制作边框投影
应用CSS3的box shadow属性,可以直接在页面中使用投影,增加页面的立体效果. 最终效果预览 HTML 代码: CSS3 Box shadow 任鸟飞网页设计是一个关注于网页设计及网站开发.图 ...
Box Shadow(阴影)-Css3写法示例
Box Shadow(阴影)-Css3演示 -moz-box-shadow:2px 2px 5px #333333; -webkit-box-shadow:2px 2px 5px #333333; b ...
CSS Box Shadow Bottom Only [复制]
本文翻译自:CSS Box Shadow Bottom Only [duplicate] This question already has an answer here: 这个问题在这里已有答案: ...
Shadow属性和【CSS3 Box Shadow(阴影)效果在线调试工具】
Shadow属性示例向内/向外 | x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 inset 阴影向内 (默认向外) /* x偏移量 | y偏移量 | 阴影颜色 */ b ...
Box Shadow CSS教程–如何向任何HTML元素添加投影
We can add a drop shadow to any HTML element using the CSS property box-shadow. Here's how. 我们可以使用CS ...
Box Shadow
1.box-shadow属性 box-shadow属性是一个给元素添加阴影效果的css3属性,允许给元素设置一个或多个阴影效果,IE9+.Firefox 4.Chrome.Opera 以及 Safar ...
html span box shadow,box-shadow用法
一. box-shadow的定义和语法当我们需要设置多个阴影时,中间需要将每个阴影用逗号隔开. /*html代码*/ /*对应的css代码*/ .test{ width: 100px; height ...
HTML水平阴影什么意思,css3阴影属性box-shadow注意事项
css3阴影属性box-shadow注意事项 2010-03-08 eNet&Ciweek css3阴影属性box-shadow的一些注意点: box-shadow:阴影水平偏移值(可取正负值 ...

如何让ie 7 支持box-shadow

如何让ie 7 支持box-shadow相关推荐

最新文章

热门文章