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;
?}
2016-10-07
你的class加到h1上了，應該加在div上
2016-03-09
我也是，z-index無效
2015-11-19
什么原因啊? 我的z-index=-1, 不管用??！
2015-08-27
沒事，應該的
2015-08-26
body{ font-family:Arial, Helvetica, sans-serif;
? ? ? font-size:20px;}
body,ul{ margin:0; padding:0;}
.wrap{ width:70%;
? ? ? ?height:200px;
? margin:100px auto;}
.wrap h1{ font-size:20px;
? ? ? ? ?text-align:center;
line-height:200px;} ??
.effect{
background:#fff;
position:relative;
box-shadow:0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
-o-box-shadow:0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
} ??
.effect:after,.effect:before{
content:'';
position:absolute;
z-index:-1;
top:50%;
bottom:0;
left:20px;
right:20px;
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
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;} ??
?你試試我的代碼，我的可以了
2015-08-26
我的也是這樣