                        課程
                    
                        /前端開發
                        
                            /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

關注問題我要回答

1931

操作

收起

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