根据canisue（http://caniuse.com/#search=box-shadow），box-shadow兼容性如下图所示：

测试代码：

 1 <!DOCTYPE html>
 2 <html>
 3
 4     <head>
 5         <meta charset="UTF-8">
 6         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 7         <title></title>
 8         <style type="text/css">
 9             * {10                 margin: 0;
11                 padding: 0;
12             }
13
14             #header {15                 width: 400px;
16                 height: 400px;
17                 margin: 10px;
18                 background-color: #999999;
19                 box-shadow: 3px 3px 5px #000;
20             }
21         </style>
22     </head>
23
24     <body>
25         <div id="header">
26         </div>
27     </body>
28
29 </html>

IE8浏览器效果：

border-radius在IE8浏览器兼容方案：

 1 <!DOCTYPE html>
 2 <html>
 3
 4     <head>
 5         <meta charset="UTF-8">
 6         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 7         <title></title>
 8         <style type="text/css">
 9             * {10                 margin: 0;
11                 padding: 0;
12             }
13
14             #header {15                 width: 400px;
16                 height: 400px;
17                 margin: 10px;
18                 background-color: #999999;
19                 box-shadow: 3px 3px 5px #000;
20                 /*关键属性设置 需要把路径设置好*/
21                 behavior: url(PIE.htc);
22             }
23         </style>
24     </head>
25
26     <body>
27         <div id="header">
28         </div>
29     </body>
30
31 </html>

IE8浏览器下效果：

PIE.HTC下载地址：http://css3pie.com/

PIE可以处理CSS3的一些属性，如：

box-shadow IE8兼容处理相关推荐

html中投影效果图,利用CSS3（box shadow）制作边框投影
应用CSS3的box shadow属性,可以直接在页面中使用投影,增加页面的立体效果. 最终效果预览 HTML 代码: CSS3 Box shadow 任鸟飞网页设计是一个关注于网页设计及网站开发.图 ...
javascript 解决IE8 兼容 placeholder 属性含password
javascript 解决IE8 兼容 placeholder 属性含password function placeholderfun(){if( !('placeholder' in docume ...
Web前端页面的浏览器兼容性测试心得（三）总结一些IE8兼容问题的解决方案
Web前端页面的浏览器兼容性测试心得(三)总结一些IE8兼容问题的解决方案参考文章: (1)Web前端页面的浏览器兼容性测试心得(三)总结一些IE8兼容问题的解决方案 (2)https://www. ...
IE8兼容的js方法
// 数组indexOf方法 if (!Array.prototype.indexOf) {Array.prototype.indexOf = function (elt /*, from*/) {v ...
IE Developer Toolbar - 浏览器模式: IE7, IE8, IE8兼容模式
同时运行IE7,IE8 ?更简单的办法 -- 有了Developer Toolbar IE8 可以已三种模式运行: IE7, IE8, IE8兼容模式: download: http://www.mi ...
Box Shadow阴影和圆角
一.盒子写Box Shadow阴影:如 box-shadow:2px 2px 5px #120F0B; //支持Opera浏览器 -moz-box-shadow:2px 2px 5px #120F0B ...
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: 这个问题在这里已有答案: ...
CSS3 Box Shadow
语法: box-shadow:1px 2px 3px #FFF; box-shadow:阴影水平偏移值(可取正负值): 阴影垂直偏移值(可取正负值):阴影模糊值:阴影颜色: 兼容性 Firefox支持 ...
Shadow属性和【CSS3 Box Shadow(阴影)效果在线调试工具】
Shadow属性示例向内/向外 | x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 inset 阴影向内 (默认向外) /* x偏移量 | y偏移量 | 阴影颜色 */ b ...

box-shadow IE8兼容处理

测试代码：

box-shadow IE8兼容处理相关推荐

最新文章

热门文章