                        课程
                    
                        /前端开发
                        
                            /CSS3
                        
                        /CSS3实现“图片阴影”效果

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

.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;

}

慕雪3202717

2017-11-01

源自：CSS3实现“图片阴影”效果 1-7

关注问题我要回答

1883

操作

收起

3 回答

慕虎5488415
2017-11-02

.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的背景颜色