CSS3 Box-Shadow Effects阴影图片框效果

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>CSS3 Box-Shadow Effects</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-family: 'Jim Nightshade', cursive;
	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:after
{
  -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>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

CSS3 Box-Shadow Effects阴影图片框效果

分类

CSS3

描述

CSS3 Box-Shadow Effects阴影图片框效果，边框阴影效果，学会了不但可以用于图片的边框制作，还可以用于其它的Div层的修饰，CSS3真的很神奇。