z-index为什么没有作用？？？
效果是这样：
HTML代码：
<!DOCTYPE html>
<html>
<head>
<title>shadow</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div>
<h1 class="shadow effect">Shadow Effect</h1>
</div>
</body>
</html>
CSS代码：
body{
font-family:"Microsoft YaHei";
font-size:25px;
margin:0;
padding:0;
}
.shadow{
width:80%;
height:200px;
text-align:center;
line-height:200px;
margin:40px auto;
background:#fff;
}
.effect{
background:#fff;
box-shadow:0 1px 2px rgba(0,0,0,0.3),0 0 50px rgba(0,0,0,0.1) inset ;
-webkie-box-shadow:0 1px 2px rgba(0,0,0,0.3),0 0 50px rgba(0,0,0,0.1) inset;
-moz-box-shadow:0 1px 2px rgba(0,0,0,0.3),0 0 50px rgba(0,0,0,0.1) inset;
-o-box-shadow:0 1px 2px rgba(0,0,0,0.3),0 0 50px rgba(0,0,0,0.1) inset;
position:relative;
z-index:100;
}
.effect:before,.effect:after{
content:"";
position:absolute;
z-index:-1;
top:50%;
bottom:0px;
left:5%;
right:5%;
box-shadow:0 0 20px rgba(0,0,0,0.8);
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
-o-box-shadow:0 0 20px rgba(0,0,0,0.8);
border-radius:100px/10px;
-webkit-border-radius:100px/10px;
-moz-border-radius:100px/10px;
-o-border-radius:100px/10px;
background:red;
}
