收集整理一些css3的图片阴影效果

主要利用gradient,transform,配合after以及before伪元素来实现各种图片阴影,卷角效果。

<!DOCTYPE HTML>

<html lang="en-US">

<head>

<meta charset="UTF-8">

<title>一些css3的图片阴影效果</title>

<style type="text/css">

.box {

width: 300px;

min-height: 300px;

margin: 30px;

display: inline-block;

background: #fff;

border: 1px solid #ccc;

position:relative;

text-align:center;

}

.box p {

margin: 30px;

outline: none;

font-size:60px;

font-weight:bold;

color:rgb(41, 180, 240);

text-shadow: 0 1px 0 rgba(0,0,0,0.3);

}

/*=========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的阴影效果*/

box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.1) inset;

/*制作右下脚折边效果*/

border-radius: 0 0 6px 0 / 0 0 50px 0;

}

/*使用:before来制作底部阴影,并对阴影进行旋转的扭曲和位移设置*/

.box1:before{

content: '';

width: 50px;

height: 100px;

position:absolute;

bottom:0; right:0;

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;

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;

border-radius: 0 0 60px 0 / 0 0 60px 0;

box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);

}

.box2:before{

content:'';

width: 25px;

height: 20px;

position: absolute;

bottom:0;

right:0;

border-radius: 0 0 30px 0;

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;

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

border-radius:60px / 5px;

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;

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;

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

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;

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;

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;

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;

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;

border-radius: 0 0 60px 60px / 0 0 60px 60px;

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

border-radius: 0 0 30px 0;

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;

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;

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

border-border-radius:0 0 30px 0;

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;

border-radius: 60px 60px 60px 0 / 5px 5px 60px 0;

box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3) ;

}

.box6:before{

content:'';

width: 25px;

height: 20px;

position: absolute;

bottom:0;

right:0;

border-radius: 0 0 30px 0;

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;

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;

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;

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;

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

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

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

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

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: 55%;

z-index:-2;

background: none;

position:absolute;

border-radius: 20px;

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

border-radius:20px;

background: white;

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;

border-radius:20px;

border: 1px solid rgba(0,0,0, 0.1);

background: rgba(0, 0, 0, 0.0);

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

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;

box-shadow: 1px 1px 4px rgba(0,0,0, 0.1);

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;

box-shadow: 1px 1px 8px rgba(0,0,0,0.1);

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;

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;

border-radius: 0 0 60px 0;

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

border-radius: 0 0 30px 0;

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;

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

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;

border-radius: 0 0 60px 60px;

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

border-radius: 0 0 30px 0;

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;

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;

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

border-radius: 0 0 30px 0;

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

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;

border-radius: 60px 60px 60px 0 / 5px 5px 60px 0;

box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3) ;

}

.box13:before{

content:'';

width: 25px;

height: 20px;

position: absolute;

bottom:0;

right:0;

border-radius: 0 0 30px 0;

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;

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;

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;

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

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

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;

border-radius: 60px/5px;

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;

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;

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

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;

box-shadow: 1px 1px 4px rgba(0,0,0,0.1);

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;

box-shadow: 1px 1px 8px rgba(0,0,0,0.1);

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;

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

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

}

/*============box16==========*/

.box16{

box-shadow: 0 10px 6px -6px #777;

}

/*========box17================*/

.box17:before,

.box17:after{

z-index: -1;

position: absolute;

content: "";

bottom: 15px;

left: 10px;

width: 50%;

top: 80%;

max-width:300px;

background: #777;

box-shadow: 0 15px 10px #777;

-webkit-transform: rotate(-3deg);

-moz-transform: rotate(-3deg);

-o-transform: rotate(-3deg);

-ms-transform: rotate(-3deg);

transform: rotate(-3deg);

}

.box17:afte

{

-webkit-transform: rotate(3deg);

-moz-transform: rotate(3deg);

-o-transform: rotate(3deg);

-ms-transform: rotate(3deg);

transform: rotate(3deg);

right: 10px;

left: auto;

}

/*==========box18=======================*/

.box18:before{

z-index: -1;

position: absolute;

content: "";

bottom: 15px;

left: 10px;

width: 50%;

top: 80%;

max-width:300px;

background: #777;

-webkit-box-shadow: 0 15px 10px #777;

-moz-box-shadow: 0 15px 10px #777;

box-shadow: 0 15px 10px #777;

-webkit-transform: rotate(-3deg);

-moz-transform: rotate(-3deg);

-o-transform: rotate(-3deg);

-ms-transform: rotate(-3deg);

transform: rotate(-3deg);

}

/*========box19===================*/

.box19:after{

z-index: -1;

position: absolute;

content: "";

bottom: 15px;

right: 10px;

left: auto;

width: 50%;

top: 80%;

max-width:300px;

background: #777;

box-shadow: 0 15px 10px #777;

-webkit-transform: rotate(3deg);

-moz-transform: rotate(3deg);

-o-transform: rotate(3deg);

-ms-transform: rotate(3deg);

transform: rotate(3deg);

}

/*=============box20=====================*/

.box20:before,

.box20:after{

z-index: -1;

position: absolute;

content: "";

bottom: 25px;

left: 10px;

width: 50%;

top: 80%;

max-width:300px;

background: #777;

box-shadow: 0 35px 20px #777;

-webkit-transform: rotate(-8deg);

-moz-transform: rotate(-8deg);

-o-transform: rotate(-8deg);

-ms-transform: rotate(-8deg);

transform: rotate(-8deg);

}

.box20:after{

-webkit-transform: rotate(8deg);

-moz-transform: rotate(8deg);

-o-transform: rotate(8deg);

-ms-transform: rotate(8deg);

transform: rotate(8deg);

right: 10px;

left: auto;

}

/*=============box21===============*/

.box21{

box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;

}

.box21:before,

.box21:after{

content:"";

position:absolute;

z-index:-1;

box-shadow:0 0 20px rgba(0,0,0,0.8);

top:50%;

bottom:0;

left:10px;

right:10px;

border-radius:100px / 10px;

}

.box21:after{

right:10px;

left:auto;

-webkit-transform:skew(8deg) rotate(3deg);

-moz-transform:skew(8deg) rotate(3deg);

-ms-transform:skew(8deg) rotate(3deg);

-o-transform:skew(8deg) rotate(3deg);

transform:skew(8deg) rotate(3deg);

}

/*=============box22===================*/

.box22{

box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;

}

.box22:before,

.box22:after{

content:"";

position:absolute;

z-index:-1;

box-shadow:0 0 20px rgba(0,0,0,0.8);

top:0;

bottom:0;

left:10px;

right:10px;

border-radius:100px / 10px;

}

.box22:after{

right:10px;

left:auto;

-webkit-transform:skew(8deg) rotate(3deg);

-moz-transform:skew(8deg) rotate(3deg);

-ms-transform:skew(8deg) rotate(3deg);

-o-transform:skew(8deg) rotate(3deg);

transform:skew(8deg) rotate(3deg);

}

/*===============box23=================*/

.box23{

box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;

}

.box23:before,

.box23:after{

content:"";

position:absolute;

z-index:-1;

box-shadow:0 0 20px rgba(0,0,0,0.8);

top:10px;

bottom:10px;

left:0;

right:0;

border-radius:100px / 10px;

}

.box23:after{

right:10px;

left:auto;

-webkit-transform:skew(8deg) rotate(3deg);

-moz-transform:skew(8deg) rotate(3deg);

-ms-transform:skew(8deg) rotate(3deg);

-o-transform:skew(8deg) rotate(3deg);

transform:skew(8deg) rotate(3deg);

}

</style>

</head>

<body>

<div class="page">

<section class="demo">

<div class="box box1"><p>Effect 1</p></div>

<div class="box box2"><p>Effect 2</p></div>

<div class="box box3"><p>Effect 3</p></div>

<div class="box box4"><p>Effect 4</p><div class="shBl"></div><div class="shBr"></div></div>

<div class="box box5"><p>Effect 5</p><div class="shBl"></div><div class="shBlFlod"></div></div>

<div class="box box6"><p>Effect 6</p><div class="cornerLf"></div><div class="cornerRt"></div></div>

<div class="box box7"><p>Effect 7</p></div>

<div class="box box8"><p>Effect 8</p></div>

<div class="box box9"><p>Effect 9</p></div>

<div class="box box10"><p>Effect 10</p></div>

<div class="box box11"><p>Effect 11</p><div class="ribbon"></div></div>

<div class="box box12"><p>Effect 12</p><div class="shBl"></div><div class="shBlFlod"></div><div class="ribbon"></div></div>

<div class="box box13"><p>Effect 13</p><div class="cornerLf"></div><div class="cornerRt"></div><div class="ribbon"></div></div>

<div class="box box14"><p>Effect 14</p><div class="ribbon"></div></div>

<div class="box box15"><p>Effect 15</p><div class="ribbon"></div></div>

<div class="box box16"><p>Effect 16</p></div>

<div class="box box17"><p>Effect 17</p></div>

<div class="box box18"><p>Effect 18</p></div>

<div class="box box19"><p>Effect 19</p></div>

<div class="box box20"><p>Effect 20</p></div>

<div class="box box21"><p>Effect 21</p></div>

<div class="box box22"><p>Effect 22</p></div>

<div class="box box23"><p>Effect 23</p></div>

</section>

</div>

</body>

</html>

提示:你可以先修改部分代码再运行。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端杂货铺

Blob初探

简介   Blob在js中意味着二进制大数据。实现该接口的对象有3个属性,分别是type(MIME),size(byte)和 一个切割方法:slice(在大文件...

2373
来自专栏飞扬的花生

Html5上传插件封装

      前段时间将flash的上传控件替换成使用纯js实现的,在此记录 1.创建标签 <div class="camera-area" style="dis...

2128
来自专栏kwcode

asp.net动态增加服务器端控件并提交表单

为什么要用原生的呢? 1、目的 原生出现浏览器兼容性问题 极少,不用测试多浏览兼容性 。需要考虑到市面上的其他垃圾浏览器。  2、性能不好 如果不考虑第一条 你...

2746
来自专栏小L的魔法馆

C++继承和派生练习(一)--关于vehicle基类

4018
来自专栏Golang语言社区

Golang的iota问题

通常人们认为iota就是0,其实并非如此。 确切的说,当iota在紧跟着关键字const的第一行出现时,iota为0,在第二行出现时,iota为1,以此类推;当...

36711
来自专栏小特工作室

基于JQuery EasyUI的WebMVC控件封装(含源码)

  JQuery EasyUI类库,大家不会陌生,出来已经有很多年了。个人感觉还是很好用的,作者更新频率也很快,bug也及时修复。   最近在整理以前的代码,找...

29010
来自专栏ASP.NET MVC5 后台权限管理系统

ASP.NET MVC5+EF6+EasyUI 后台管理系统(48)-工作流设计-起草新申请

创建新表单之后,我们就可以起草申请了,申请按照严格的表单步骤和分支执行。 起草的同时,我们分解流转的规则中的审批人并保存,具体流程如下 接下来创建DrafCon...

1976
来自专栏C#

DotNet隐藏敏感信息操作方法

    在项目中,有时候一些信息不便完全显示,只需要显示部分信息。现在提供一些隐藏敏感信息的操作方法,主要为对信息的截取操作:      1.指定左右字符...

1737
来自专栏跟着阿笨一起玩NET

C#常用操作类库一(验证类)

721
来自专栏跟着阿笨一起玩NET

无法将类型“System.Collections.Generic.IEnumerable<EmailSystem.Model.TemplateInfo>”隐式转换为“System.Collection

881

扫码关注云+社区