box-shadowIE8兼容处理方法介绍

时间：2020-11-27 来源：智榕旅游

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

box-shadow IE8兼容处理方法介绍

测试代码：

<!DOCTYPE html>
<html>

 <head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <title></title>
 <style type="text/css">
 * {
 margin: 0;
 padding: 0;
 }
 
 #header {
 width: 400px;
 height: 400px;
 margin: 10px;
 background-color: #999999;
 box-shadow: 3px 3px 5px #000;
 }
 </style>
 </head>

 <body>
 <div id="header">
 </div>
 </body>

</html>

IE8浏览器效果：

box-shadow IE8兼容处理方法介绍

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

<!DOCTYPE html>
<html>

 <head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <title></title>
 <style type="text/css">
 * {
 margin: 0;
 padding: 0;
 }
 
 #header {
 width: 400px;
 height: 400px;
 margin: 10px;
 background-color: #999999;
 box-shadow: 3px 3px 5px #000;
 /*关键属性设置 需要把路径设置好*/
 behavior: url(PIE.htc);
 }
 </style>
 </head>

 <body>
 <div id="header">
 </div>
 </body>

</html>

IE8浏览器下效果：

box-shadow IE8兼容处理方法介绍

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

box-shadow IE8兼容处理方法介绍