您的位置：首页 > Web前端 > CSS

css3实现翘边阴影效果

2017-09-05 00:40 381 查看 
原理：利用css3的box-shadow属性，transform：skew（），rotate（）属性，以及伪元素：after和：before
效果如下图：
<style type="text/css">/*box-shadow:x偏移量   y偏移量  模糊度  颜色*//*翘边阴影 */*{padding: 0;margin: 0;}.box{position: relative;margin: 30px auto;width:250px;height: 350px;background: #fff;border: 1px solid #eee;box-shadow: 0 1px 5px rgba(0,0,0,0.2),0 0 50px rgba(0,0,0,0.07) inset;}.box:before{left: 9px;transform: skew(-11deg) rotate(-6deg);}.box:after{right: 9px;transform: skew(11deg) rotate(6deg);}.box:before,.box:after{position: absolute;bottom: 5px;content: "";width: 140px;height:120px;border: 1px solid #ccc;box-shadow: 0 1px 20px rgba(0,0,0,0.4);z-index: -1;}</style>
<body><div class="box"></div></body>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航