求解呀~~看看哪里錯了，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;
}
2016-04-06
給effect加個白色背景
2016-04-05
應該大概不用內核兼容吧z-index，-webkit-z-index:-1;-o-z-index:-1;-moz-z-index:-1;去掉看看，還不行的話在effect上也加z-index：999；比-1大就行