`
iaiai
  • 浏览: 2197039 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

css3 写了个种纸张贴纸效果

 
阅读更多
运行效果:




css: 
*{margin: 0;padding:0;}
        body {margin: 0; padding: 20px 100px;background-color: #f4f4f4;}
        pre{max-height:200px;overflow:auto;}
        div.demo {overflow:auto;}
        .box {
            width: 300px;
            min-height: 300px;
            margin: 30px;
            display: inline-block;
            background: #fff;
            border: 1px solid #ccc;
            position:relative;
        }
        .box p {
            margin: 30px;
            color: #aaa;
            outline: none;
        }
        /*=========Box1===========*/
        .box1{            
            background: -webkit-gradient(linear, 0% 20%, 0% 100%, from(#fff), to(#fff), color-stop(.1,#f3f3f3));
            background: -webkit-linear-gradient(0% 0%, #fff, #f3f3f3 10%, #fff);
            background: -moz-linear-gradient(0% 0%, #fff, #f3f3f3 10%, #fff);
            background: -o-linear-gradient(0% 0%, #fff, #f3f3f3 10%, #fff);
            /*设置Box的阴影效果*/
            -webkit-box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.1) inset;
            -moz-box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.1) inset;
            box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.1) inset;
            /*制作右下脚折边效果*/
            -moz-border-radius: 0 0 6px 0 / 0 0 50px 0;
            -webkit-border-radius: 0 0 6px 0 / 0 0 50px 0;
            border-radius: 0 0 6px 0 / 0 0 50px 0;
        }
        /*使用:before来制作底部阴影，并对阴影进行旋转的扭曲和位移设置*/
        .box1:before{
            content: '';
            width: 50px;
            height: 100px;
            position:absolute;
            bottom:0; right:0;
            -webkit-box-shadow: 20px 20px 10px rgba(0, 0, 0, 0.1);
            -moz-box-shadow: 20px 20px 15px rgba(0, 0, 0, 0.1);
            box-shadow: 20px 20px 15px rgba(0, 0, 0, 0.1);
            z-index:-1;
            -webkit-transform: translate(-35px,-40px)    skew(0deg,30deg) rotate(-25deg);
            -moz-transform: translate(-35px,-40px) skew(0deg,32deg)    rotate(-25deg);
            -o-transform: translate(-35px,-40px) skew(0deg,32deg)    rotate(-25deg);    
                transform: translate(-35px,-40px) skew(0deg,32deg)    rotate(-25deg);    
        }
        /*使用:after来制作顶部的阴影，并对阴影进行旋转的扭曲和位移设置*/
        .box1:after{
            content: '';
            width: 100px;
            height: 100px;
            top:0; left:0;
            position:absolute;
            display: inline-block;
            z-index:-1;
            -webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
            -moz-box-shadow: -10px -10px 15px rgba(0, 0, 0, 0.2);
            box-shadow: -10px -10px 15px rgba(0, 0, 0, 0.2);
            -webkit-transform: rotate(2deg)    translate(20px,25px) skew(20deg);
            -moz-transform: rotate(7deg) translate(20px,25px) skew(20deg);
            -o-transform: rotate(7deg) translate(20px,25px) skew(20deg);    
                transform: rotate(7deg) translate(20px,25px) skew(20deg);                
        }
        
        /*==========Box2============*/
        .box2{
            padding: 0 0 1px 0;
            background: #f3f3f3;
            background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#f3f3f3), to(#fff), color-stop(.1,#f3f3f3));
            background: -webkit-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
            background: -moz-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
            background: -o-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
            border-top: 1px solid #ccc;
            border-right: 1px solid #ccc;
            -webkit-border-radius: 0 0 60px 0 / 0 0 60px 0;
            -moz-border-radius: 0 0 60px 0 / 0 0 60px 0;
            border-radius: 0 0 60px 0 / 0 0 60px 0;
            -webkit-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
            -moz-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
            box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);            
        }
        .box2:before{
            content:'';    
            width: 25px;
            height: 20px;
            position: absolute;
            bottom:0;
            right:0;
            -webkit-border-radius: 0 0 30px 0;
            -moz-border-radius: 0 0 30px 0;
            border-radius: 0 0 30px 0;
            -webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
            -moz-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
            box-shadow:-2px -2px 5px rgba(0, 0, 0, 0.3);
            -webkit-transform:    rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
            -moz-transform:    rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
            -o-transform:    rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
            transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
        }
        /*这里，我们做出的褶皱阴影*/
        .box2:after{
            content: '';
            z-index: -1;
            width: 100px;
            height: 100px;
            position:absolute;
            bottom:0;
            right:0;
            background: rgba(0, 0, 0, 0.2);
            display: inline-block;
            -webkit-box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
            -moz-box-shadow: 20px 20px 18px rgba(0, 0, 0, 0.2);
            box-shadow: 20px 20px 8px rgba()0,0,0,0.2;
            -webkit-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);
            -moz-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);
            -o-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);    
            transform: rotate(0deg) translate(-45px,-20px) skew(20deg);       
        }
        
        /*==========Box3=========*/
        .box3{
            padding: 5px 0 ;
            background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
            background: -webkit-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
            background: -moz-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
            background: -o-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
            -webkit-border-radius: 60px / 5px;
            -moz-border-radius: 60px / 5px;
            border-radius:60px / 5px;
            -webkit-box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset;
            -moz-box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset;
            box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset;
        }

        .box3:before{
            content: '';
            width: 50px;
            height: 50px;
            top:0; right:0;
            position:absolute;
            display: inline-block;
            z-index:-1;
            -webkit-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
            -moz-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
            box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
            -webkit-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
            -moz-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
            -o-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);    
            transform: rotate(2deg) translate(-14px,20px) skew(-20deg);                
        }

        .box3:after{
            content: '';
            width: 100px;
            height: 100px;
            top:0; left:0;
            position:absolute;
            z-index:-1;
            display: inline-block;
            -webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
            -moz-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
            box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
            -webkit-transform: rotate(2deg) translate(20px,25px) skew(20deg);
            -moz-transform: rotate(2deg) translate(20px,25px) skew(20deg);    
            -o-transform: rotate(2deg) translate(20px,25px) skew(20deg);    
            transform: rotate(2deg) translate(20px,25px) skew(20deg);            
        }
        
        /*============Box4==============*/
        .box4{
            padding: 5px 0 ;
            background: #fff;
            background: -webkit-gradient(linear, 0% 20%, 0% 100%, from(#fff), to(#fff), color-stop(.2, #f2f2f2));
            background: -webkit-linear-gradient(0% 0% 360deg, #fff, #f2f2f2 20%, #fff );
            background: -moz-linear-gradient(0% 0% 360deg, #fff, #f2f2f2 20%, #fff );
            background: -o-linear-gradient(0% 0% 360deg, #fff, #f2f2f2 20%, #fff );
            -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
            -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
        }

        .box4:before{
            content: '';
            width: 50px;
            height: 50px;
            top:0; right:0;
            position:absolute;
            z-index: -1;
            -webkit-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
            -moz-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
            box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
            -webkit-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
            -moz-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);    
                -o-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
                     transform: rotate(2deg) translate(-14px,20px) skew(-20deg);        
        }
        .box4:after{
            content: '';
            width: 50px;
            height: 50px;
            top:0; left:0;
            position:absolute;
            z-index:-1;
            display: inline-block;
            -webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
            -moz-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
            box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
            -webkit-transform: rotate(2deg) translate(12px,25px) skew(20deg);
            -moz-transform: rotate(2deg) translate(12px,25px) skew(20deg);    
            -o-transform: rotate(2deg) translate(12px,25px) skew(20deg);
            transform: rotate(2deg) translate(12px,25px) skew(20deg);                    
        }
        /*盒子右下角阴影效果*/
        .box4 .shBr{
            width: 100px;
            height: 100px;
            bottom:0; right:0;
            position:absolute;
            z-index: -1;
            -webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2);
            -moz-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2);
            box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2);
            -webkit-transform: rotate(0deg) translate(-20px,-15px) skew(20deg);
            -moz-transform: rotate(0deg) translate(-20px,-15px) skew(20deg);
            -o-transform: rotate(0deg) translate(-20px,-15px) skew(20deg);    
                transform: rotate(0deg) translate(-20px,-15px) skew(20deg);                   
        }
        /*盒子左下角阴影效果*/
        .box4 .shBl{
            width: 100px;
            height: 100px;
            bottom:0; left:0;
            position:absolute;
            z-index: -1;
            -webkit-box-shadow: -10px 10px 10px rgba(0, 0, 0, 0.2);
            -moz-box-shadow: -10px 10px 10px rgba(0, 0, 0, 0.2);
            box-shadow: -10px 10px 10px rgba(0, 0, 0, 0.2);
            -webkit-transform: rotate(0deg) translate(20px,-15px) skew(-20deg);
            -moz-transform: rotate(0deg) translate(20px,-15px) skew(-20deg);
            -o-transform: rotate(0deg) translate(20px,-15px) skew(-20deg);
            transform: rotate(0deg) translate(20px,-15px) skew(-20deg);               
        }
        
        /*==========Box5==========*/
        .box5{
            padding: 0 0 1px 0;
            background: #f3f3f3;
            background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#f3f3f3), to(#fff), color-stop(.1,#f3f3f3));
            background: -webkit-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
            background: -o-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
            background: -moz-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
            border-top: 1px solid #ccc;
            border-right: 1px solid #ccc;
            -webkit-border-radius: 0 0 60px 60px / 0 0 60px 60px;
            -moz-border-radius: 0 0 60px 60px / 0 0 60px 60px;
            border-radius: 0 0 60px 60px / 0 0 60px 60px;
            -webkit-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);    
            -moz-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
            box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
        }
        /*右折效果*/
        .box5:before{
            content:'';    
            width: 25px;
            height: 20px;
            background: white;
            position: absolute;
            bottom:0; right:0;
            background: -webkit-gradient(linear, 0% 20%, 50% 40%, from(#fff), to( #eee), color-stop(.1,#fff));
            background: -webkit-linear-gradient(0 50% 90deg, #fff, #fff 10%, #eee);
            background: -moz-linear-gradient(0 50% 90deg, #fff, #fff 10%, #eee);
            background: -o-linear-gradient(0 50% 90deg, #fff, #fff 10%, #eee);
            -webkit-border-radius: 0 0 30px 0;
            -moz-border-radius: 0 0 30px 0;
            border-radius: 0 0 30px 0;
            -webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
            -moz-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
            box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
            -webkit-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
            -moz-transform: rotate(-20deg) skew(-40deg,-3deg)translate(-13px,-13px);
            -o-transform: rotate(-20deg)skew(-40deg,-3deg) translate(-13px,-13px);    
                transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);                    
        }
        
        /*右折的阴影*/
        .box5:after{
            content: '';
            z-index: -10;
            width: 100px;
            height: 100px;
            position:absolute;
            bottom:0;
            right:0;
            background: rgba(0, 0, 0, 0.2);
            display: inline-block;
            -webkit-box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
            -moz-box-shadow: 20px 20px 18px rgba(0, 0, 0, 0.2);
            box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
            -webkit-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);
            -moz-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);
                -o-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);
                transform: rotate(0deg) translate(-45px,-20px) skew(20deg);                
        }
        /*左下角折角*/
        .box5 .shBlFlod{
            z-index: -10;
            width: 50px;
            height: 50px;
            position:absolute;
            bottom:0; left:0;
            -webkit-box-shadow: -20px 20px 8px rgba(0, 0, 0, 0.2);
            -moz-box-shadow: -20px 20px 18px rgba(0, 0, 0, 0.2);
            box-shadow: -20px 20px 8px rgba(0, 0, 0, 0.2);
            -webkit-transform: rotate(0deg) translate(40px,-20px) skew(-20deg);
            -moz-transform: rotate(0deg) translate(40px,-20px) skew(-20deg);
            -o-transform: rotate(0deg) translate(40px,-20px) skew(-20deg);
            transform: rotate(0deg) translate(40px,-20px) skew(-20deg);                    
        }
        /*左下角阴影*/
        .box5 .shBl{
            content:'';    
            width: 25px;
            height: 20px;
            background: white;
            position: absolute;
            bottom:0; left:0;
            background: #fff;
            background: -webkit-gradient(linear, 0% 20%, 50% 80%, from(#fff), to( #eee), color-stop(.1,#fff));
            background: -webkit-linear-gradient(0 50%, #fff, #fff 10%, #eee);
            background: -moz-linear-gradient(0 50%, #fff, #fff 10%, #eee);
            background: -o-linear-gradient(0 50%, #fff, #fff 10%, #eee);
            -webkit-border-radius:0 0 30px 0;
            -moz-border-radius:0 0 30px 0;
            border-border-radius:0 0 30px 0;
            -webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
            -moz-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
            box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
            -webkit-transform: rotate(103deg) skew(-3deg,-40deg) translate(-13px,-15px);
            -moz-transform: rotate(103deg) skew(-3deg,-40deg) translate(-13px,-15px);    
            -o-transform: rotate(103deg) skew(-3deg,-40deg) translate(-13px,-15px);
            transform: rotate(103deg) skew(-3deg,-40deg) translate(-13px,-15px);                        
        }
        
        /*=========Box6========*/
        .box6{
            padding: 0 0 1px 0;
            background:#fff;
            background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
            background: -webkit-linear-gradient(0 0 270deg, #fff, #fff 10%, #f3f3f3);
            background: -moz-linear-gradient(0 0 270deg, #fff, #fff 10%, #f3f3f3);
            background: -o-linear-gradient(0 0 270deg, #fff, #fff 10%, #f3f3f3);
            border-top: 1px solid #ccc;
            border-right: 1px solid #ccc;
            border-left: 1px solid #ccc;
            -webkit-border-radius: 60px 60px 60px 0 / 5px 5px 60px 0;
            border-radius: 60px 60px 60px 0 / 5px 5px 60px 0;
            border-radius: 60px 60px 60px 0 / 5px 5px 60px 0;
            -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3) ;
            -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3) ;
            box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3) ;
        }

        .box6:before{
            content:'';    
            width: 25px;
            height: 20px;
            position: absolute;
            bottom:0;
            right:0;
            -webkit-border-radius: 0 0 30px 0;
            -moz-border-radius: 0 0 30px 0;
            border-radius: 0 0 30px 0;
            -webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
            -moz-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
            box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
            -webkit-transform:    rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
            -moz-transform:    rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);    
            -o-transform:    rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);    
            transform:    rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);                        
        }

        .box6:after{
            content: '';
            z-index: -10;
            width: 100px;
            height: 100px;
            position:absolute;
            bottom:0;
            right:0;
            background: rgba(0, 0, 0, 0.2);
            display: inline-block;
            -webkit-box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
            -moz-box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
            box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
            -webkit-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);
            -moz-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);
            -o-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);
            transform: rotate(0deg) translate(-45px,-20px) skew(20deg);                        
        }
        .box6 .cornerLf{
            width: 100px;
            height: 100px;
            top:0; left:0;
            position:absolute;
            z-index:-6;
            display: inline-block;
            -webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
            -moz-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
            box-shadow: -10px -10px 20px rgba(0, 0, 0, 0.2);
            -webkit-transform: rotate(2deg) translate(20px,25px) skew(20deg);
            -moz-transform: rotate(2deg) translate(20px,20px) skew(20deg);
            -o-transform: rotate(2deg) translate(20px,20px) skew(20deg);
            transform: rotate(2deg) translate(20px,20px) skew(20deg);                        
        }
        .box6 .cornerRt{
            content: '';
            width: 50px;
            height: 50px;
            top:0; right:0;
            position:absolute;
            display: inline-block;
            z-index:-6;
            -webkit-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
            -moz-box-shadow: 10px -10px 18px rgba(0, 0, 0, 0.2);
            box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
            -webkit-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
            -moz-transform: rotate(2deg) translate(-14px,15px) skew(-20deg);
            -o-transform: rotate(2deg) translate(-14px,15px) skew(-20deg);
            transform: rotate(2deg) translate(-14px,15px) skew(-20deg);                        
        }
        /*==========Box7=========*/
        .box7{
            padding: 0 0 1px 0;
            background: #fff;
            background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
            background: -webkit-linear-gradient(0 0 270deg, #fff, #fff 10%, #f3f3f3);
            background: -o-linear-gradient(0 0 270deg, #fff, #fff 10%, #f3f3f3);
            background: -moz-linear-gradient(0 0 270deg, #fff, #fff 10%, #f3f3f3);
            border-top: 1px solid #ccc;
            border-right: 1px solid #ccc;
            border-left: 1px solid #ccc;
            -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
            -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
            box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
        }

        .box7:before{
            content: '';
            position:absolute;
            width: 130px;
            height: 30px;
            border-left: 1px dashed rgba(0, 0, 0, 0.1);
            border-right: 1px dashed rgba(0, 0, 0, 0.1);
            background: rgba(0, 0, 0, 0.1);
            background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
            background: -webkit-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
            background: -o-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
            background: -moz-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
            -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
            -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
            box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
            -webkit-transform:translate(-50px,10px) skew(10deg,10deg) rotate(-50deg);
            -moz-transform:translate(-50px,10px) skew(10deg,10deg) rotate(-50deg);    
                -o-transform:translate(-50px,10px) skew(10deg,10deg) rotate(-50deg);    
                transform:translate(-50px,10px) skew(10deg,10deg) rotate(-50deg);                        
        }
        .box7:after{
            content: '';
            position:absolute;
            right:0;
            bottom:0;
            width: 130px;
            height: 30px;
            background: rgba(0, 0, 0, 0.1);
            background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
            background: -webkit-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
            background: -o-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
            background: -moz-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
            border-left: 1px dashed rgba(0, 0, 0, 0.1);
            border-right: 1px dashed rgba(0, 0, 0, 0.1);
            -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
            -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
            box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
            -webkit-transform: translate(50px,-20px) skew(10deg,10deg) rotate(-50deg);
            -moz-transform: translate(50px,-20px) skew(10deg,10deg) rotate(-50deg);
            -o-transform: translate(50px,-20px) skew(10deg,10deg) rotate(-50deg);
            transform: translate(50px,-20px) skew(10deg,10deg) rotate(-50deg)                            
        }
        
        /*==========Box8=========*/
        .box8{
            border: 2px solid #ccc;
            background: rgba(0, 0, 0, 0.5);
            -webkit-box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.1);
            -moz-box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.1);
            box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.1);
        }

        .box8:before{
            content: '';
            width: 110%;
            left: 0; 
            height: 110%;
            z-index:-1;
            position:absolute;
            border: 1px solid #ccc;
            background: #f3f3f3;
            background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#f3f3f3), to(#fff), color-stop(.1,#f3f3f3));
            background: -webkit-linear-gradient(0 0 90deg, #f3f3f3, #f3f3f3 10%, #fff);
            background: -o-linear-gradient(0 0 90deg, #f3f3f3, #f3f3f3 10%, #fff);
            background: -moz-linear-gradient(0 0 90deg, #f3f3f3, #f3f3f3 10%, #fff);
            -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1);
            -moz-box-shadow: 0px 0px 12px rgba(0,0,0,0.1);
            box-shadow: 0px 0px 12px rgba(0,0,0,0.1);
            -webkit-transform: translate(-5%,-5%);
            -moz-transform: translate(-5%, -5%);
            -o-transform: translate(-5%, -5%);
            transform: translate(-5%, -5%);
        }

        .box8:after{
            content: '';
            width: 100%;
            left: 0; 
            height: 79%;
            z-index:-2;
            background: none;
            position:absolute;
            -webkit-border-radius: 20px;
            -moz-border-radius: 20px;
            border-radius: 20px;
            -webkit-box-shadow: 15px 0px 30px rgba(0, 0, 0, 0.2);
            -moz-box-shadow: 15px 0px 30px rgba(0, 0, 0, 0.2);
            box-shadow: 15px 0px 30px rgba(0, 0, 0, 0.2);
            -webkit-transform: translate(0,0);
            -moz-transform: translate(0,0);
            -o-transform: translate(0,0);
            transform: translate(0,0);
        }
        
        /*=========Box9=======*/
        .box9{
            border: 1px solid rgba(0,0,0,0.1);
            -webkit-border-radius: 20px;
            -moz-border-radius: 20px;
            border-radius:20px;
            background: white;
            -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
            -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
            box-shadow:0px 0px 5px rgba(0,0,0,0.3);
        }
        /*底部的透明框效果*/
        .box9:before{
            content: '';
            width: 110%;
            left: 0; 
            height: 111%;
            z-index:-1;
            position:absolute;
            -webkit-border-radius: 20px;
            -moz-border-radius: 20px;
            border-radius:20px;
            border: 1px solid rgba(0,0,0, 0.1);
            background: rgba(0, 0, 0, 0.0);
            -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
            -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
            box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
            -webkit-transform:     translate(-5%,-5%);
            -moz-transform: translate(-5%, -5%);
            -o-transform: translate(-5%, -5%);
            transform: translate(-5%, -5%);
        }
        /*这是框的顶部部分的粘带效果*/
        .box9:after{
            content: '';
            position:absolute;
            top:-25px; left: 30%;
            width: 130px;
            height: 40px;
            background: rgba(0, 0, 0, 0.1);
            background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
            background: -webkit-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
            background: -o-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
            background: -moz-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
            border-left: 1px dashed rgba(0, 0, 0, 0.1);
            border-right: 1px dashed rgba(0, 0, 0, 0.1);
            -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
            -moz-box-shadow: 0px 0px 12px rgba(0,0,0,0.2);
            box-shadow: 0px 0px 12px rgba(0,0,0,0.2);
        }
        /*=========Box10=====*/
        .box10{
            padding: 0 0 1px 0;
            background: #fff;
            background: -webkit-gradient(linear, 100% 100%, 50% 10%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
            background: -webkit-linear-gradient(100% 50%, #fff, #fff 10%, #f3f3f3);
            background: -o-linear-gradient(100% 50%, #fff, #fff 10%, #f3f3f3);
            background: -moz-linear-gradient(100% 50%, #fff, #fff 10%, #f3f3f3);
            border: 1px solid #ccc;
            -webkit-box-shadow: 1px 1px 4px rgba(0,0,0, 0.1);
            -moz-box-shadow: 1px 1px 4px rgba(0,0,0, 0.1);
            box-shadow: 1px 1px 4px rgba(0,0,0, 0.1);
            -moz-border-radius: 0 0 60px 0 / 0 0 5px 0;
            -webkit-border-radius: 0 0 60px 0 / 0 0 5px 0;
            border-radius: 0 0 60px 0 / 0 0 5px 0;
        }
        .box10:before{
            content: '';
            width: 98%;
            z-index:-1;
            height: 100%;
            padding: 0 0 1px 0;
            position: absolute;
            bottom:0; right:0;
            background: #fff;
            background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f9f9f9), color-stop(.1,#fff));
            background: -webkit-linear-gradient(0 0 270deg, #fff, #fff 10%, #f9f9f9);
            background: -o-linear-gradient(0 0 270deg, #fff, #fff 10%, #f9f9f9);
            background: -moz-linear-gradient(0 0 270deg, #fff, #fff 10%, #f9f9f9);
            border: 1px solid #ccc;
            -webkit-box-shadow: 1px 1px 8px rgba(0,0,0, 0.1);
            -moz-box-shadow: 1px 1px 8px rgba(0,0,0,0.1);
            box-shadow: 1px 1px 8px rgba(0,0,0,0.1);
            -moz-border-radius: 0 0 60px 0 / 0 0 5px 0;
            -webkit-border-radius: 0 0 60px 0 / 0 0 5px 0;
            border-radius: 0 0 60px 0 / 0 0 5px 0;
            -webkit-transform: skew(2deg,2deg) translate(3px,8px);
            -moz-transform: skew(2deg,2deg) translate(3px,8px);
                -o-transform: skew(2deg,2deg) translate(3px,8px);
            transform: skew(2deg,2deg) translate(3px,8px);                        
        }
        .box10:after{
            content: '';
            width: 98%;
            z-index:-1;
            height: 98%;
            padding: 0 0 1px 0;
            position: absolute;
            bottom:0; right:0;
            background: #fff;
            background: -webkit-gradient(linear, 0% 20%, 0% 100%, from(#f3f3f3), to(#f6f6f6), color-stop(.1,#fff));
            background: -webkit-linear-gradient(0 0 360deg, #f3f3f3, #fff 10%, #f6f6f6);
            background: -o-linear-gradient(0 0 360deg, #f3f3f3, #fff 10%, #f6f6f6);
            background: -moz-linear-gradient(0 0 360deg, #f3f3f3, #fff 10%, #f6f6f6);
            border: 1px solid #ccc;
            -webkit-box-shadow: 0px 0px 8px rgba(0,0,0, 0.1);
            -moz-box-shadow: 0px 0px 8px rgba(0,0,0, 0.1);
            box-shadow: 0px 0px 8px rgba(0,0,0, 0.1);
            -webkit-transform: skew(2deg,2deg) translate(-1px,2px);
            -moz-transform: skew(2deg,2deg) translate(-1px,2px)    ;
                -o-transform: skew(2deg,2deg) translate(-1px,2px)    ;
            transform: skew(2deg,2deg) translate(-1px,2px)    ;                    
        }
        /*==========Box11========*/
        .box11{
            padding: 0 0 1px 0;
            background: #f3f3f3;
            background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#f3f3f3), to(#fff), color-stop(.1,#f3f3f3));
            background: -webkit-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
            background: -o-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
            background: -moz-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
            border-top: 1px solid white;
            border-right: 1px solid #ccc;
            -webkit-border-radius: 0 0 60px 0;
            -moz-border-radius: 0 0 60px 0;
            border-radius: 0 0 60px 0;
            -webkit-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
            -moz-box-shadow: -1px 2px 2px rgba(0,0,0,0.2);
            box-shadow: -1px 2px 2px rgba(0,0,0,0.2);
        }
        .box11:before{
            content:'';    
            width: 25px;
            height: 20px;
            background: white;
            position: absolute;
            bottom:0; right:0;
            background:#fff;
            background: -webkit-gradient(linear, 0% 20%, 50% 40%, from(#fff), to( #eee), color-stop(.1,#fff));
            background: -webkit-linear-gradient(0 50%, #fff, #fff 10%, #eee);
            background: -o-linear-gradient(0 50%, #fff, #fff 10%, #eee);
            background: -moz-linear-gradient(0 50%, #fff, #fff 10%, #eee);
            -webkit-border-radius: 0 0 30px 0;
            -moz-border-radius: 0 0 30px 0;
            border-radius: 0 0 30px 0;
            -webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
            -moz-box-shadow: -2px -2px 5px rgba(0,0,0,0.3);
            box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
            -webkit-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
            -moz-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
            -o-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
            transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
        }

        .box11:after{
            content: '';
            z-index: -1;
            width: 100px;
            height: 100px;
            position:absolute;
            bottom:0;
            right:0;
            background: rgba(0, 0, 0, 0.2);
            display: inline-block;
            -webkit-box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
            -moz-box-shadow: 20px 20px 17px rgba(0,0,0,0.2);
            box-shadow: 20px 20px 17px rgba(0,0,0,0.2);
            -webkit-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);
            -moz-transform: rotate(0deg) translate(-40px,-17px) skew(20deg);
            -o-transform: rotate(0deg) translate(-40px,-17px) skew(20deg);
            transform: rotate(0deg) translate(-40px,-17px) skew(20deg);                        
        }


        .box11 .ribbon{
            position:absolute;
            top:-25px; left: 30%;
            width: 130px;
            height: 40px;
            background:#ccc;
            background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
            background: -webkit-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
            background: -o-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
            background: -moz-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
            border-left: 1px dashed rgba(0, 0, 0, 0.1);
            border-right: 1px dashed rgba(0, 0, 0, 0.1);
            -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
            -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
            box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
        }
        
        /*========Box 12========*/
        .box12{
            padding: 0 0 1px 0;
            background:#f3f3f3;
            background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#f3f3f3), to(#fff), color-stop(.1,#f3f3f3));
            background: -webkit-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
            background: -o-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
            background: -moz-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
            border-top: 1px solid #ccc;
            border-right: 1px solid #ccc;
            -webkit-border-radius: 0  0 60px 60px;
            -moz-border-radius: 0  0 60px 60px;
            border-radius: 0  0 60px 60px;
            -webkit-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
            -moz-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
            box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
        }

        .box12:before{
            content:'';    
            width: 25px;
            height: 20px;
            background: white;
            position: absolute;
            bottom:0; right:0;
            background: -webkit-gradient(linear, 0% 20%, 50% 40%, from(#fff), to( #eee), color-stop(.1,#fff));
            background: -webkit-linear-gradient(0 50%, #fff, #fff 10%, #eee);
            background: -o-linear-gradient(0 50%, #fff, #fff 10%, #eee);
            background: -moz-linear-gradient(0 50%, #fff, #fff 10%, #eee);
            -webkit-border-radius: 0 0 30px 0;
            -moz-border-radius: 0 0 30px 0;
            border-radius: 0 0 30px 0;    
            -webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
            -moz-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
            box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
            -webkit-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
            -moz-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);    
            -o-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);                            
            transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);                    
        }

        .box12:after{
            content: '';
            z-index: -10;
            width: 100px;
            height: 100px;
            position:absolute;
            bottom:0;
            right:0;
            background: rgba(0, 0, 0, 0.2);
            display: inline-block;
            -webkit-box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
            -moz-box-shadow: 20px 20px 17px rgba(0, 0, 0, 0.2);
            box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
            -webkit-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);
            -moz-transform: rotate(0deg) translate(-40px,-17px) skew(20deg);
            -o-transform: rotate(0deg) translate(-40px,-17px) skew(20deg);                        
            transform: rotate(0deg) translate(-45px,-20px) skew(20deg);                    
        }
        .box12 .shBlFlod{
            z-index: -10;
            width: 50px;
            height: 50px;
            position:absolute;
            bottom:0; left:0;
            -webkit-box-shadow: -20px 20px 8px rgba(0, 0, 0, 0.2);
            -moz-box-shadow: -20px 20px 17px rgba(0, 0, 0, 0.2);    
            box-shadow: -20px 20px 8px rgba(0, 0, 0, 0.2);
            -webkit-transform: rotate(0deg) translate(40px,-20px) skew(-20deg);
            -moz-transform: rotate(0deg) translate(40px,-17px) skew(-20deg);
            -o-transform: rotate(0deg) translate(40px,-17px) skew(-20deg);                        
            transform: rotate(0deg) translate(40px,-20px) skew(-20deg);                    
        }
        .box12 .shBl{
            width: 25px;
            height: 20px;
            z-index:20;
            background: white;
            position: absolute;
            bottom:0; left:0;
            background: -webkit-gradient(linear, 0% 20%, 50% 80%, from(#fff), to( #eee), color-stop(.1,#fff));
            background: -webkit-linear-gradient(0 50%, #fff, #fff 10%, #eee);
            background: -o-linear-gradient(0 50%, #fff, #fff 10%, #eee);
            background: -moz-linear-gradient(0 50%, #fff, #fff 10%, #eee);
            -webkit-border-radius: 0 0 30px 0;
            -moz-border-radius: 0 0 30px 0;
            border-radius: 0 0 30px 0;
            -webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
            -moz-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
            box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
            -webkit-transform: rotate(103deg) skew(-3deg,-40deg) translate(-13px,-15px);
            -moz-transform: rotate(103deg) skew(-3deg,-40deg) translate(-13px,-15px);    
            -o-transform: rotate(103deg) skew(-3deg,-40deg) translate(-13px,-15px);                            
            transform: rotate(103deg) skew(-3deg,-40deg) translate(-13px,-15px);                    
        }

        .box12 .ribbon{
            content: '';
            position:absolute;
            top:-25px; left: 30%;
            width: 130px;
            height: 40px;
            background: #ccc;
            background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
            background: -webkit-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
            background: -o-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
            background: -moz-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
            border-left: 1px dashed rgba(0, 0, 0, 0.1);
            border-right: 1px dashed rgba(0, 0, 0, 0.1);
            -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
            -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
            box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
        }
        /*=======Box 13=====*/
        .box13{
            padding: 0 0 1px 0;
            background:#fff;
            background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
            background: -webkit-linear-gradient(0% 0% 270deg, #fff, #fff 10%, #f3f3f3);
            background: -o-linear-gradient(0% 0% 270deg, #fff, #fff 10%, #f3f3f3);
            background: -moz-linear-gradient(0% 0% 270deg, #fff, #fff 10%, #f3f3f3);
            border-top: 1px solid #ccc;
            border-right: 1px solid #ccc;
            border-left: 1px solid #ccc;
            -webkit-border-radius: 60px 60px 60px 0 / 5px 5px 60px 0;
            -moz-border-radius: 60px 60px 60px 0 / 5px 5px 60px 0;
            border-radius: 60px 60px 60px 0 / 5px 5px 60px 0;
            -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3) ;
            -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3) ;
            box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3) ;
        }
        .box13:before{
            content:'';    
            width: 25px;
            height: 20px;
            position: absolute;
            bottom:0;
            right:0;
            -webkit-border-radius: 0 0 30px 0;
            -moz-border-radius: 0 0 30px 0;
            border-radius: 0 0 30px 0;
            -webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
            -moz-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
            box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
            -webkit-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
            -moz-transform:    rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
            -o-transform:    rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);                    
            transform:    rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);                
        }
        .box13:after{
            content: '';
            z-index: -10;
            width: 100px;
            height: 100px;
            position:absolute;
            bottom:0;
            right:0;
            background: rgba(0, 0, 0, 0.2);
            display: inline-block;
            -webkit-box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
            -moz-box-shadow: 20px 20px 18px rgba(0, 0, 0, 0.2);
            box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
            -webkit-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);
            -moz-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);
            -o-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);                        
            transform: rotate(0deg) translate(-45px,-20px) skew(20deg);                    
        }
        .box13 .cornerLf{
            width: 100px;
            height: 100px;
            top:0; left:0;
            position:absolute;
            z-index:-6;
            display: inline-block;
            -webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
            -moz-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
            box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
            -webkit-transform: rotate(2deg) translate(20px,25px) skew(20deg);
            -moz-transform: rotate(2deg) translate(20px,25px) skew(20deg);
            -o-transform: rotate(2deg) translate(20px,25px) skew(20deg);                        
            transform: rotate(2deg) translate(20px,25px) skew(20deg);                
        }

        .box13 .cornerRt{
            content: '';
            width: 50px;
            height: 50px;
            top:0; right:0;
            position:absolute;
            display: inline-block;
            z-index:-6;
            -webkit-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
            -moz-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
            box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
            -webkit-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
            -moz-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
            -o-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);                            
            transform: rotate(2deg) translate(-14px,20px) skew(-20deg);                    
        }

        .box13 .ribbon:before{
            content: '';
            position:absolute;
            top:0; left: 0;
            width: 130px;
            height: 40px;
            background:rgba(0,0,0,0.2);
            background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
            background: -webkit-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
            background: -o-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
            background: -moz-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
            border-left: 1px dashed rgba(0, 0, 0, 0.1);
            border-right: 1px dashed rgba(0, 0, 0, 0.1);
            -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
            -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
            box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
            -webkit-transform: rotate(90deg) skew(0,0) translate(100px,65px);
            -moz-transform: rotate(90deg) skew(0,0) translate(100px,65px);
            -o-transform: rotate(90deg) skew(0,0) translate(100px,65px);    
            transform: rotate(90deg) skew(0,0) translate(100px,65px);
        }
        .box13 .ribbon:after{
            content: '';
            position:absolute;
            top:0; right: 0;
            width: 130px;
            height: 40px;
            background:rgba(0, 0, 0, 0.1);
            background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
            background: -webkit-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
            background: -o-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
            background: -moz-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
            border-left: 1px dashed rgba(0, 0, 0, 0.1);
            border-right: 1px dashed rgba(0, 0, 0, 0.1);
            -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
            -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
            box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
            -webkit-transform: rotate(90deg) skew(0,0) translate(100px,-65px);
            -moz-transform: rotate(90deg) skew(0,0) translate(100px,-65px);
            -o-transform: rotate(90deg) skew(0,0) translate(100px,-65px);
            transform: rotate(90deg) skew(0,0) translate(100px,-65px);
        }
        
        /*==========Box14=========*/
        .box14{
            padding: 5px 0 ;
            background:#fff;
            background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
            background: -wbkit-linear-gradient(0% 0% 270deg, #fff, #fff 10%, #f3f3f3);
            background: -o-linear-gradient(0% 0% 270deg, #fff, #fff 10%, #f3f3f3);
            background: -moz-linear-gradient(0% 0% 270deg, #fff, #fff 10%, #f3f3f3);
            border: 1px solid #ccc;
            -webkit-border-radius: 60px 5px;
            -moz-border-radius: 60px/5px;
            border-radius: 60px/5px;
            -webkit-box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset;
            -moz-box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset;
            box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset;
        }

        .box14:before{
            content: '';
            width: 50px;
            height: 50px;
            top:0; right:0;
            position:absolute;
            display: inline-block;
            z-index:-1;
            -webkit-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
            -moz-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
            box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
            -webkit-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
            -moz-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
            -o-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);                        
            transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
        }

        .box14:after{
            content: '';
            width: 100px;
            height: 100px;
            top:0; left:0;
            position:absolute;
            z-index:-1;
            display: inline-block;
            -webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
            -moz-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
            box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);    
            -webkit-transform: rotate(2deg) translate(20px,25px) skew(20deg);
            -moz-transform:  rotate(2deg) translate(20px,25px) skew(20deg);
            -o-transform:  rotate(2deg) translate(20px,25px) skew(20deg);                        
            transform:  rotate(2deg) translate(20px,25px) skew(20deg);
        }

        .box14 .ribbon{
            position:absolute;
            top:0; right: 0;
            width: 130px;
            height: 40px;
            background: rgba(0, 0, 0, 0.1);
            background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
            background: -moz-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
            border-left: 1px dashed rgba(0, 0, 0, 0.1);
            border-right: 1px dashed rgba(0, 0, 0, 0.1);
            -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
            -moz-box-shadow: 0px 0px 12px rgba(0,0,0,0.2);
            box-shadow: 0px 0px 12px rgba(0,0,0,0.2);
            -webkit-transform: rotate(6deg) skew(0,0) translate(-60%,-5px);
            -moz-transform: rotate(6deg) skew(0,0) translate(-60%,-5px);
            -o-transform: rotate(6deg) skew(0,0) translate(-60%,-5px);
            transform: rotate(6deg) skew(0,0) translate(-60%,-5px);
        }
        
        /*=========BOX15======*/
        .box15{
            padding: 0 0 1px 0;
            background:#fff;
            background: -webkit-gradient(linear, 100% 100%, 50% 10%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
            background: -webkit-linear-gradient(100% 50% 90deg, #fff, #fff 10%, #f3f3f3);
            background: -o-linear-gradient(100% 50% 90deg, #fff, #fff 10%, #f3f3f3);
            background: -moz-linear-gradient(100% 50% 90deg, #fff, #fff 10%, #f3f3f3);
            border: 1px solid #ccc;
            -webkit-box-shadow: 1px 1px 4px rgba(0,0,0, 0.1);
            -moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.1);
            box-shadow: 1px 1px 4px rgba(0,0,0,0.1);
            -webkit-border-radius: 0 0 60px 0 / 0 0 5px 0;
            -moz-border-radius: 0 0 60px 0 / 0 0 5px 0;    
            border-radius: 0 0 60px 0 / 0 0 5px 0;    
        }

        .box15:before{
            content: '';
            width: 98%;
            z-index:-1;
            height: 100%;
            padding: 0 0 1px 0;
            position: absolute;
            bottom:0; right:0;
            background: #fff;
            background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f9f9f9), color-stop(.1,#fff));
            background: -webkit-linear-gradient(0 0 270deg, #fff, #fff 10%, #f9f9f9);
            background: -o-linear-gradient(0 0 270deg, #fff, #fff 10%, #f9f9f9);
            background: -moz-linear-gradient(0 0 270deg, #fff, #fff 10%, #f9f9f9);
            border: 1px solid #ccc;
            -webkit-box-shadow: 1px 1px 8px rgba(0,0,0, 0.1);
            -moz-box-shadow: 1px 1px 8px rgba(0,0,0,0.1);
            box-shadow: 1px 1px 8px rgba(0,0,0,0.1);
            -webkit-border-radius: 0 0 60px 0 / 0 0 5px 0;
            -moz-border-radius: 0 0 60px 0 / 0 0 5px 0;    
            border-radius: 0 0 60px 0 / 0 0 5px 0;
            -webkit-transform: skew(2deg,2deg) translate(3px,8px);
            -moz-transform: skew(2deg,2deg) translate(3px,8px);
            -o-transform: skew(2deg,2deg) translate(3px,8px);                        
            transform: skew(2deg,2deg) translate(3px,8px);
        }
        .box15:after{
            content: '';
            width: 98%;
            z-index:-1;
            height: 98%;
            padding: 0 0 1px 0;
            position: absolute;
            bottom:0; right:0;
            background: #f3f3f3;
            background: -webkit-gradient(linear, 0% 20%, 0% 100%, from(#f3f3f3), to(#f6f6f6), color-stop(.1,#fff));
            background: -webkit-linear-gradient(0% 0% 360deg, #f3f3f3, #fff, #f6f6f6);
            background: -o-linear-gradient(0% 0% 360deg, #f3f3f3, #fff, #f6f6f6);
            background: -moz-linear-gradient(0% 0% 360deg, #f3f3f3, #fff, #f6f6f6);
            border: 1px solid #ccc;
            -webkit-box-shadow: 0px 0px 8px rgba(0,0,0, 0.1);
            -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.1);
            box-shadow: 0px 0px 8px rgba(0,0,0,0.1);
            -webkit-transform: skew(2deg,2deg) translate(-1px,2px);
            -moz-transform: skew(2deg,2deg) translate(-1px,2px);
            -o-transform: skew(2deg,2deg) translate(-1px,2px);                        
            transform: skew(2deg,2deg) translate(-1px,2px);
        }

        .box15 .ribbon{
            position:absolute;
            top:0; left: 0;
            width: 130px;
            height: 40px;
            background:rgba(0, 0, 0, 0.1);
            background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
            background: -webkit-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
            background: -o-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
            background: -moz-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
            border-left: 1px dashed rgba(0, 0, 0, 0.1);
            border-right: 1px dashed rgba(0, 0, 0, 0.1);
            -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
            -moz-box-shadow: 0px 0px 12px rgba(0,0,0,0.2);
            box-shadow: 0px 0px 12px rgba(0,0,0,0.2);
            -webkit-transform: rotate(-30deg) skew(0,0) translate(-30px,-20px);
            -moz-transform: rotate(-30deg) skew(0,0) translate(-30px,-20px);
            -o-transform: rotate(-30deg) skew(0,0) translate(-30px,-20px);
            transform: rotate(-30deg) skew(0,0) translate(-30px,-20px);
        }


html: 
<html>
<head>
<link href="a.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="demo">  
        <div class="box box1"><p>Box1</p></div>  
        <div class="box box2"><p>Box2</p></div>  
        <div class="box box3"><p>Box3</p></div>  
        <div class="box box4"><p>Box4</p><div class="shBl"></div><div class="shBr"></div></div>  
        <div class="box box5"><p>Box5</p><div class="shBl"></div><div class="shBlFlod"></div></div>  
        <div class="box box6"><p>Box6</p><div class="cornerLf"></div><div class="cornerRt"></div></div>  
        <div class="box box7"><p>Box7</p></div>  
        <div class="box box8"><p>Box8</p></div>  
        <div class="box box9"><p>Box9</p></div>  
        <div class="box box10"><p>Box10</p></div>  
        <div class="box box11"><p>Box11</p><div class="ribbon"></div></div>  
        <div class="box box12"><p>Box12</p><div class="shBl"></div><div class="shBlFlod"></div><div class="ribbon"></div></div>  
        <div class="box box13"><p>Box13</p><div class="cornerLf"></div><div class="cornerRt"></div><div class="ribbon"></div></div>  
        <div class="box box14"><p>Box14</p><div class="ribbon"></div></div>  
        <div class="box box15"><p>Box15</p><div class="ribbon"></div></div>  
    </div> 
</body>
</html>
  • 大小: 21.9 KB
  • 大小: 20.6 KB
  • 大小: 31.1 KB
分享到：
| linux平台makefile文件的编写基础篇
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    DIV+CSS纸张效果博客模板

    【标题】"DIV+CSS纸张效果博客模板"是一个基于HTML和CSS技术设计的博客模板，它通过巧妙的布局和样式模拟出纸张的视觉效果，为读者提供一种独特的阅读体验。这种效果通常包括背景纹理、边角处理、阴影以及排版等方面...

    CSS3制作带阴影贴纸标签特效.rar

    在这个实例中，我们将主要关注CSS3的盒模型、阴影效果、边框半径以及文本阴影等特性。 首先，让我们理解贴纸标签特效的基本概念。这种效果通常包括一个带有立体感的标签，边缘可能有圆角，同时在标签的底部或背面有...

    使用css3实现动态效果

    2.需要使用css3中的至少两种效果，并且用到css3的地方请注释，例如阴影效果，动画效果，2D转换，3D转换，css3过渡等等。 3.要求css样式写在head的style里，或者新建一个css文件写在里面。图片放在单独建立的文件夹下...

    53种CSS3阴影效果box-shadows.css

    总的来说，"53种CSS3阴影效果box-shadows.css"是一个实用的工具，它简化了添加阴影到网页元素的过程，帮助开发者快速实现专业级别的设计效果，同时鼓励他们探索和实验更多的CSS3阴影可能性。通过深入理解`box-shadow...

    12种炫酷CSS3图片切换过渡效果

    在“12种炫酷CSS3图片切换过渡效果”这个主题中，我们将深入探讨这些效果的实现方法和应用场景。 1. **滑动切换**：这种效果通常用于轮播图，图片沿水平或垂直方向平滑滑动，提供了一种流畅的视觉过渡。通过`...

    5种动画过渡效果的纯CSS3幻灯片特效

    【标题】"5种动画过渡效果的纯CSS3幻灯片特效"介绍了一种利用CSS3技术实现的幻灯片组件，它具有五种不同的动画过渡效果，为网站的动态展示提供了丰富的选择。这种特效完全基于CSS3，不依赖JavaScript库，因此在性能...

    117个图片css3鼠标经过效果

    在本主题“117个图片css3鼠标经过效果”中，我们将探讨CSS3如何实现图片在鼠标悬停时的动态变换，以及这些效果可能带来的用户体验提升。 1. 鼠标悬停伪类选择器：`:hover` CSS3中的`:hover`伪类选择器允许我们在...

    css3-弹出窗口弹出效果

    在IT领域，CSS3是一种强大的样式表语言，用于定义网页的布局、颜色、字体等视觉效果。本主题聚焦于“css3-弹出窗口弹出效果”，这涉及到网页交互设计中的一个重要方面，即如何通过CSS3实现吸引用户的动态提示或信息...

    CSS3动画效果源代码27个合集.zip

    纯CSS3模拟风车转动效果纯css3云彩动画效果纯css3制作出来的狐狸尾巴燃烧...效果28个纯css3 加载loading动画特效轻量级CSS3立体式3D旋转动画效果简单易用的纯CSS3图片墙效果css3高度灵活的模拟扑克牌切换图片效果又一...

    7种CSS3鼠标hover图片效果.zip

    "7种CSS3鼠标hover图片效果.zip"是一个资源包，它包含了七种不同的CSS3技术实现的鼠标hover时图片变换效果。这些效果可以通过引入名为“magic.css”的样式表来实现，让网站的用户体验更加生动有趣。 首先，让我们...

    js+css时钟效果 js+css时钟效果

    js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+...

    18种炫酷CSS3动画效果库Mimic.css

    Mimic.css是一个专为前端开发者设计的CSS3动画效果库，它集合了18种独特的、引人注目的动画效果，旨在提升网页的交互性和视觉吸引力。与知名的animate.css类似，Mimic.css以简洁易用的方式为网页增添动态元素，为...

    阿里圣诞节雪花css3效果，css3雪花效果

    阿里圣诞节雪花css3效果，css3雪花效果

    css3 transform 14种侧边栏导航的隐藏和显示动画效果

    在本文中，我们将深入探讨如何使用CSS3的`transform`属性来实现14种不同的侧边栏导航隐藏和显示的动画效果。这些效果对于优化移动设备和其他小屏幕设备的用户体验至关重要，因为它们允许用户轻松地访问和隐藏导航...

    CSS3简洁版左右翻页电子书效果

    标题中的“CSS3简洁版左右翻页电子书效果”指的是使用CSS3技术实现的一种模拟真实书籍翻页动画的网页设计效果。CSS3是层叠样式表（Cascading Style Sheets）的第三版，它引入了许多新的特性和功能，极大地增强了网页...

    23种css3图片阴影效果

    纯CSS3实现的各种阴影效果，无需图片和js代码即可实现图片、按钮等元素的阴影效果，完全通过样式控制阴影大小、方向和深度，经测试效果相当不错非常酷。

    纯CSS3动画按钮效果 5种漂亮样式

    在“纯CSS3动画按钮效果 5种漂亮样式”这个主题中，我们将讨论如何利用这些特性来设计吸引眼球且用户体验良好的按钮。 首先，CSS3中的关键帧动画（@keyframes）是实现按钮动画的核心。通过定义动画的不同阶段，我们...

    模拟iphone面板折叠的css3折叠效果

    【CSS3库】是网页设计领域的一个重要工具，它提供了丰富的样式和动画功能，使得开发者可以创建出富有表现力和动态效果的网页。在本案例中，“模拟iphone面板折叠的css3折叠效果”是一个利用CSS3特性实现的交互式插件...

    CSS3 烟花升空爆炸炫丽动画效果源码.rar

    由html5 CSS3 jquery生成的烟花动画效果，烟花升空爆炸炫丽动画源码，烟花的数量、大孝高度都随机，且烟花散开的效果五颜六色，很漂亮噢。烟花爆炸一瞬间的动画效果很逼真，很自然，全屏查看效果，更棒。 　代码中...

    纯css3艺术文字样式效果代码

    在IT行业中，CSS3是一种强大的样式表语言，用于描述HTML或XML（包括SVG、MathML等各种XML方言）文档的呈现。随着技术的发展，CSS3引入了许多新的特性和功能，其中包括艺术文字样式效果。本篇文章将深入探讨如何使用...

Magicbox
Global site tag (gtag.js) - Google Analytics