曲线阴影z-index不管用。。。-慕课网

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

来源：1-7 曲线阴影

慕雪3202717

2017-11-01 11:13

.jj {
height:300px;
height:200px;
position:relative;
box-shadow: 0px 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
-moz-box-shadow: 0px 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
-o-box-shadow: 0px 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
-webkit-box-shadow: 0px 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;

}
.jj:after,.jj:before {
content:'';
background:#f00;
position:absolute;
z-index:-6;
top:50%;
bottom:0;
left:10px;
right:10px;
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
box-shadow:0 0 20px rgba(0,0,0,0.8);
-o-box-shadow:0 0 20px rgba(0,0,0,0.8);
-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
border-radius:100px/10px;

}

写回答关注

3回答

慕虎5488415: 2017-11-02 09:55:39

.biaoti {
    width:700px;
    height:400px;
    margin: 20px auto;
    position:relative;
    background-color: #FFFFFF;
    text-align: center;
    box-shadow: 0px 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
    -moz-box-shadow: 0px 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
    -o-box-shadow: 0px 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
    -webkit-box-shadow: 0px 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;

}
.biaoti:after,.biaoti:before {
    content:'';
    background:#f00;
    position:absolute;
    z-index:-1;
    top:50%;
    bottom:0;
    left:10px;
    right:10px;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    -o-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    border-radius:100px/10px;
}

如上已解决请设置div的背景颜色

0 0

慕虎5488415

2017-11-01 14:28:05

.jj 没有设置背景颜色，加一个白色试一下

0 2
慕虎5488415

2017-11-01 14:09:00

z-index的值设为-1就好了啊没有用么？

0 0

CSS3实现“图片阴影”效果

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

34769 学习 · 62 问题

查看课程

相似问题

曲阴影中的主阴影为什么要相对定位？是为了z-index吗？

回答 1

z-index为什么不管用？

回答 4

z-index

回答 5

关于box-shadow的水平阴影垂直阴影问题

回答 2

Z-INDEX 没效果

回答 6

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