求解呀~~看看哪里错了，after写的那个一直在上面，z-index标签怎么没用

源自：1-2 结构编写

<!DOCTYPE html>

<html>

<head>

<title>before、after</title>

</head>

<body>

<h3>Shadow Effect </h3>

</div>

</body>

</html>

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;

}

提问者：芥子1204 2016-03-31 16:28