CSS3 box-shadow应用制作Drop Shadow效果

网页设计 跟版网
在介绍CSS3系列时，我花了一篇很长的篇幅专门介绍了CSS3的box-shadow属性以及其具体的使用等。在此文末尾还介绍了使用box-shadow配合CSS3的伪类中的“:before”和“:after”制作Box Drop Shadow效果的实例。随着CSS3和

在介绍CSS3系列时，我花了一篇很长的篇幅专门介绍了CSS3的box-shadow属性以及其具体的使用等。在此文末尾还介绍了使用box-shadow配合CSS3的伪类中的“:before”和“:after”制作Box Drop Shadow效果的实例。随着CSS3和HTML5的不断发展和壮大，大家在平时中也发现了不少实例或网站都不需要使用图片来进行设计了，直接使用代码来完成。今天我们就在前面的基础上进行深层次的挖掘——使用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提供的在线制作Drop Shadow效果的工具。

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


相关文章推荐：

1.box-shadow是给元素块添加内阴影外阴影

2.box-shadow怎么用？CSS3 box-shadow 属性

3.CSS3属性box-shadow使用详细教程

4.css3 box-shadow参数spread使用技巧

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！

相关文档推荐

HTML meta refresh 刷新与跳转(重定向)页面
refresh 属性值 -- 刷新与跳转(重定向)页面refresh用于刷新与跳转(重定向)页面refresh出现在http-e
修复ShopNC使用QQ 互联时提示100010 错误
QQ 互联不允许 URL 有 Hash 存在，而 ShopNC 默认下是 #63;act=toqqop=g 这样的链接回调的，所以会导致设置失败，或者 100010 错误。1. 建立 /shop/api_qq.php 文件2. 修改 /shop/api/qq/comm/config.php$_SESSION[cal
box-shadow怎么用？CSS3 box-shadow 属性
向 div 元素添加 box-shadow：div{box-shadow: 10px 10px 5px #888888;}页面底部有更多实例。浏览器支持定义和用法IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。box-shadow 属性向框添加
box-shadow是给元素块添加内阴影外阴影
text-shadow 是给文本添加阴影效果，box-shadow是给元素块添加周边阴影效果。随着html5和CSS3的普及，这一特殊效果使用越来越普遍。 基本语法 是{box-shadow:[inset] x-offset y-offset blur-radius spre
在Javascript里访问SharePoint列表数据的实现方法-javascript技
跟版精品模板网提供SharePoint,列表数据,等网页设计素材资源，提供相关网页设计资源的教程和免费下载。跟版网，专业织梦网页设计模板资源站。。
使用javascript获取flash加载的百分比的实现代码-javascript技巧
跟版精品模板网提供flash,百分比,等网页设计素材资源，提供相关网页设计资源的教程和免费下载。跟版网，专业织梦网页设计模板资源站。。
html教程css教程前端开发cms教程seo优化网页设计服务器数据库平面设计电脑教程编程教程互联网移动开发php编程java编程建站技巧Python编程
织梦资讯网 织梦模板 dede 外语学校 织梦鬼故事 竞价网站源码 竞价培训网 门户网站 织梦二次开发 织梦笑话网 dedecms笑话网 织梦源码 网站建设 搞笑图片 织梦教程 旅游网站源码 织梦旅游网 学校培训 html5 企业织梦源码 医院源码 后台样式 移动营销页 整形医院 大学医院 新手建站 客服代码 洗衣机维修 企业网站 淘宝客 导航菜单 教育网站 学校源码 装修网站 装修模板 美容整形 女性健康 妈妈网 机械源码 建站公司 珠宝首饰 苹果网站 手机资讯 美女图片 织梦模版打包 妇科源码 安卓市场源码 男性时尚网 健康之家 app应用网站 笑话网站 下载站 美女图片网 中医院网站 家装网站源码 QQ网站 标牌网站 魔兽世界网 淘宝客源码 YY网站源码 别墅设计网站 服装搭配网 宝宝起名网 站长网站 婚庆网站 脑科医院源码 笑话源码 肝胆医院 意外怀孕源码 工作室