Z-INDEX 没效果-慕课网

Z-INDEX 没效果

来源：1-7 曲线阴影

webJ

2015-01-31 21:53

Z-INDEX 没效果

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{
   margin:0;
   padding:0;
   font-size:20px;
   font-weight:bold;
   font-family:Arial;
}
.box{
   width:1000px;
   height:400px;
   margin: 10px auto;
   box-shadow:0 1px 4px rgba(0,0,0,0.2),0 0 40px rgba(0,0,0,0.1) inset;
   position:relative;
   z-index:1;
   }
.box:after, .box:before{
      content:"";
   background:#000;
   top:50%;
   bottom:0;
   left:10px;
   right:10px;
   position:absolute;
   z-index:-1;
   -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
   -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
   box-shadow:0 0 20px rgba(0,0,0,0.8);
   -moz-border-radius:100px / 10px;
   border-radius:100px / 10px;
}

.box h1{
   text-align:center;
   line-height:400px;
}
</style>
</head>

<body>

<div class="box">
<h1>Hello,Word!</h1>
</div>
</body>
</html>

写回答关注

5回答

Desoer

2015-11-19 14:06:46

..懂了我搞了半天。。原来是这个原因！！！

0 0
qq_小柯_1

2015-11-13 15:41:22

原来是要给主阴影设置个背景

0 0
said

2015-08-08 16:12:57

谢谢你的自问自答我也出现了这个问题

2 0

natsuy... 回复精慕门229...

设置背景色啊。。。=w= 我也出现了这种问题。。

2015-08-14 10:20:42

共 2 条回复 >
webJ

2015-01-31 22:09:56

。。。好吧，我知道了。。第一个div 没加背景颜色

0 1
webJ

2015-01-31 22:05:58

- -。why？

0 0

CSS3实现“图片阴影”效果

利用多投影重叠的原理，实现曲线阴影与翘边阴影的效果

34769 学习 · 62 问题

查看课程

相似问题

z-index

回答 5

z-index为什么没有作用？？？

回答 6

z-index为什么不管用？

回答 4

曲线阴影z-index不管用。。。

回答 3

为什么设置z-index无效？曲边还是在.effect上方显示

回答 4

打开慕课网App查看更多内容