求解呀~~看看哪里错了，after写的那个一直在上面，z-index标签怎么没用
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>before、after</title>
<link rel="stylesheet" type="text/css" href="css/style3.css">
</head>
<body>
<div class="box effect">
<h3>Shadow Effect </h3>
</div>
</body>
</html>
<!--css代码-->
body{margin:0px;
padding:0px;
font-size:15px;
font-family:Arial, Helvetica, sans-serif;
}
.box{
width:70%;
height:200px;
margin:40px auto;
}
.box h3{line-height:200px;
text-align:center;}
.effect{ box-shadow:0px 1px 4px rgba(0,0,0,0.3),0px 0px 40px rgba(0,0,0,0.1) inset;
position:relative;
}
.effect:after{
content:"";
position:absolute;
-webkit-z-index:-1;
-o-z-index:-1;
-moz-z-index:-1;
z-index:-1;//为什么这个代码一直没有用
top:50%;
bottom:-2px;
left:10px;
right:10px;
background:#F00;
box-shadow:0px 0px 20px rgba(0,0,0,0.7);
border-radius:100px/10px;
}
