Home > Article > Web Front-end > Introduction to box-shadow IE8 compatible processing method
Introduction to box-shadow IE8 compatible processing method
- 高洛峰Original
- 2017-03-24 09:37:183224browse
According to canisue (http://caniuse.com/#search=box-shadow), box-shadow compatibility is shown in the figure below:
Test code:
<!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 browser effect:
border-radius compatible solution in IE8 browser:
<!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>
Effect under IE8 browser:
PIE can handle some properties of CSS3, such as:
The above is the detailed content of Introduction to box-shadow IE8 compatible processing method. For more information, please follow other related articles on the PHP Chinese website!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Problems and solutions using margin border overlay in CSSNext article：Problems and solutions using margin border overlay in CSS