CSS3 制作Drop Shadow效果

今天我们就在前面的基础上进行深层次的挖掘——使用CSS3的制作不同的Box Drop Shadow效果。 如：

正如前面所言，下面的代码让我们再一次展示了CSS3的强大。今天我们主要使用CSS3的box-shadow配合部分标签和CSS3的伪类中的“:before”和“:after”制作各种不同的Box Drop Shadow效果

制作这些效果比你想象的要简单多，你只需要熟悉CSS3的属性，那么你就可以轻松的不使用任何图形软件开始你的设计。同样的原理，使用CSS3来做设计效果，我们始终少不了的一样东西，那就是HTML Markup。

基本的HTML Markup:

<div class="box"></div> 

我们使用CSS3制作Box Drop Shadow效果，最原始的就是需要上面的一个HTML结构。如果你需要制作不同的效果，我们只需要在此基础上加上不同的类名，比如说“box1”、“box2”等，此处我们把上面的结构叫做基类，或者叫模板也行，同时我们给其一个简单的样式。

【注】：下面的所有实例，如果没有进行特殊说明，其HTML结构都是以此代码为例。

基本的CSS Code

.box { width: 300px; min-height: 300px; margin: 30px; display: inline-block; background: #fff; border: 1px solid #ccc; position:relative; } 

为了更好介绍本教程的内容，我在此处统一了所有Box的大小，其中所有样式你都可以根据自己需要去修改，唯一一点position:relative;是不能少的。下面我们分别一种一种效果来介绍：

【注】：下面的所有实例，都是在“div.box”样式基础上实现，下面每例其他的代码都以“box1”、“box2”等来区别，如果你需要单独使用每一例，记得加上上面的样式代码。。

效果一：

效果一是制作一个简单的阴影效果，让盒子左上角和右下角有一个小阴影，并添加了少许的内阴影效果，来增强质感。那么一起来看代码吧。

CSS Code

/*=========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);	  } 

效果三：

效果三是使用CSS3来实现一个模拟小皱纹的效果，大家可以仔细留意Box的顶部和底部的效果。

CSS CODE

/*==========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);	  } 

效果四：

效果四是在盒子四个角都有一个阴影，这样一来只单独配合“:before”和“:after”就无法实现了，从前面的实例大家都应该非常清楚，上面每个实例的阴影都是有由他们各自的“:before”和“:after”实现，这样一来要制作四个角的阴影我们就需要使用另外两个空的<div>来补做阴影的效果。

HTML Markup

<div class="box box4"> <div class="shBl"><!-- 左下角阴影 --></div> <div class="shBr"><!-- 右下角阴影 --></div> </div> 

CSS CODE

/*============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);	  } 

效果五

这个效果制作底下两个折角效果，带上阴影更如纸张的样子了。此例也需要借助两个<div>来辅助，才能有效果。

HTML Markup

<div class="box box5"> <div class="shBl"><!- -左下角阴影 --></div> <div class="shBlFlod"><!-- 左下角折角 --></div> </div> 

CSS CODE

/*==========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);	  } 

效果六：

效果六是另一种皱纹的效果。这种效果和效果二极其相似，只是我们在box左上角和右上角加了一点特效。

HTML Markup

<div class="box box6"> <div class="cornerLf"><!-- 实现左上角效果 --></div> <div class="cornerRt"><!-- 实现右上角效果 --></div> </div> 

CSS CODE

/*=========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);	  } 

效果七：

效果七我们是要制作一种贴在墙壁上的效果

CSS CODE

/*==========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)	  } 

效果八：

效果八其实很简单

CSS CODE:

/*==========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); } 

效果九

效果要更复杂，更好，更多，那就需要发挥你的想像空间去创造，下面效果九让我们添加一个漂亮透明的框架围绕我们的Box。

CSS CODE

/*=========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); } 

效果十

这外效果很有意思，就像几张纸堆在一起，而且他们有一个层次感。

CSS CODE

/*=========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)	;	  } 

效果十一

效果十一制作是的一张纸用透明胶带粘上某面板上的效果，而且右下角配上一个折角和阴影效果，这种有没有感觉风起吹纸折边效果。

HTML Markup

<div class="box box11"> <div class="ribbon"><!-- 透明胶带效果 --></div> </div> 

CSS CODE

/*==========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); } 

效果十二

效果十二可以说是效果五和效果十一的结合版本

HTML Markup

<div class="box box12"> <div class="shBl"><!- -左下角阴影 --></div> <div class="shBlFlod"><!-- 左下角折角 --></div> <div class="ribbon"><!-- 透明胶带效果 --></div> </div> 

CSS Code

/*========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); } 

效果十三

结合皱纹与在其右下角的折叠纸盒，然后我们使用2条胶带将其粘在墙上使用。

HTML Markup

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

CSS CODE

/*=======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); } 

效果十四

CSS3的功能是强大的，你可以使用他来制作各种以前只有图片才能实现的效果，比如说将一对象按一定的角度来摆放。

HTML Markup

<div class="box box14"><div class="ribbon"></div></div> 

CSS CODE

/*==========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); } 

效果十五

这个效果就像是几张纸贴在墙上一样的效果

HTML Markup

<div class="box box14"><div class="ribbon"></div></div> 

CSS CODE

/*=========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); } 

上面我主要给大家展示了十五种用CSS3制作的各种不同的Box Drop Shadow效果。这是一种纯CSS制作的效果，很久以前需要使用纯CSS来实现上面的效果是一种不可想象的事情，那么现在实现了，而且是轻松的实现了。当然，有时你会感觉自己去创作会有点烦，那么你也可以使用wordpressthemeshock.com提供的在线制作Drop Shadow效果的工具。

今天主要和大家一起见证了使用纯CSS3来制作不同效果的Box Drop Shadow效果。从上面的代码中，我们不难发现，使用CSS3制作上面的效果，主要使用了其：Border-radius、box-shadow、transform、RGBA以及他的伪类“:before”和“:after”。总得来说，只要你有想象力，创造力，在配上你对CSS3各种属性的灵活度，你就能用他写出你想要的效果。那么今天就到此，有关于Box Drop Shadow的介绍就完了，如果你对上面的效果感兴趣，那就快动手来一次吧，或者直接点击下面的Demo。

如需转截烦请注明出处：W3CPLUS