CSS3 制作Drop Shadow效果

最新推荐文章于 2024-07-15 16:33:50 发布
最新推荐文章于 2024-07-15 16:33:50 发布
阅读量534 收藏
点赞数
分类专栏： CSS3 文章标签： css class border html div 360
 
 

在介绍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.com提供的在线制作Drop Shadow效果的工具。

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

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

小小赞助大大帮助

appteam_vlctech
关注
专栏目录
使用 CSS 的 drop-shadow 属性实现线条光影效果
SvqiAnaconda的博客
09-21 288
在上面的例子中，我们设置了水平偏移量为 0 像素，垂直偏移量为 2 像素，模糊程度为 4 像素，阴影颜色为半透明的黑色（rgba(0, 0, 0, 0.5)）。总结一下，通过使用 CSS 的 drop-shadow 属性，我们可以轻松地实现线条光影效果，为页面元素增加深度感和立体感。在上面的例子中，我们创建了一个具有 200 像素宽度和 2 像素高度的线条元素，并为其添加了一个黑色的背景色。除了单一的线条元素，你还可以将 drop-shadow 效果应用到其他类型的元素上，比如文字、图像等。
css矩形凹陷效果_被低估的CSS滤镜：drop-shadow
weixin_33664286的博客
12-01 709
来源：公众号《前端全栈开发者》如果你熟悉CSS，则可能了解 box-shadow 属性。但是你知道有一个CSS滤镜 drop-shadow 可以做类似的事情吗？就像 box-shadow 一样，我们可以输入x-offset、y-offset、模糊半径和颜色的值。.my-element { filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.2...
CSS3实现Drop-shadow
weixin_34062469的博客
05-25 250
我们可以通过 CSS3 中的box-shdow和transform 来实现酷炫的Drop-shadow效果： 下面记录一下是实现步骤。 DOM 结构 我们仅仅需要一个div作为主体，阴影可借助伪元素:before和:after来实现。所以我们的 DOM 结构非常简单。 <div class="drop-shadow"&g...
CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
tianmd_Eric的博客
01-23 1236
要使用标准的CSS3实现某元素的投影效果，有两个套路，第一个就是使用常见的box-shadow, 第二个就是使用CSS3的filter阴影滤镜drop-shadow，那这两个阴影实现有什么具体的差异呢？ 一、兼容性不一 CSS3 box-shadow从IE9浏览器开始就支持了，兼容性如下截图： 而filter中的drop-shadowIE13才开始支持，移动端Android4.4才开始支...
CSS阴影效果的比较之drop-Shadow与box-Shadow
12-14
drop-shadow与box-shadow都是阴影效果（光晕效果）的css属性，二者最大的不同点在于：box-shadow只能制作矩形的阴影，而drop-shadow则可以制作和物件不透明区域完全相同形状的阴影。底下是二个css属性的用法： ....
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
01-21
要使用标准的CSS3实现某元素的投影效果，有两个套路，第一个就是使用常见的box-shadow, 第二个就是使用CSS3的filter阴影滤镜drop-shadow，那这两个阴影实现有什么具体的差异呢？ 一、兼容性不一 CSS3 box-shadow从...
css3 box-shadow阴影(外阴影与外发光)图示讲解
12-09
CSS3的`box-shadow`属性是一个非常强大的工具，用于给元素添加阴影效果，无论是外阴影还是内阴影。这个属性能够显著提升网页设计的视觉吸引力，同时保持代码的简洁性。以下是对`box-shadow`属性的详细说明： 1. **...
css3 drop-shaow阴影效果
weixin_30576859的博客
04-27 98
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title>Demo: CSS drop-shadows without images &#8211; Nicolas Gallaghe...
css3dropshadow,CSS3 filter:drop-shadow滤镜与box-shadow区别应用
weixin_34644635的博客
08-04 345
要使用标准的CSS3实现某元素的投影效果，有两个套路，第一个就是使用常见的box-shadow, 第二个就是使用CSS3的filter阴影滤镜drop-shadow，那这两个阴影实现有什么具体的差异呢？一、兼容性不一CSS3box-shadow从IE9浏览器开始就支持了，如下表示意：而filter中的drop-shadowIE13才开始支持，移动端Android4.4才开始支持，细想一下，其实离...
css滤镜：drop-shadow
xuan的博客
07-31 1136
因为box-shadow绘制的是矩形阴影，而drop-shadow可以给不规则图形绘制阴影。
css3滤镜-投影(DropShadow)滤镜
xyy_933的博客
05-03 765
投影(DropShadow)滤镜    投影滤镜展示用于图片         相关参数介绍：         1.enbaled:设置滤镜是否激活         2.color：指定滤镜产生的阴影颜色         3.offx:指定阴影水平方向上的偏移量，默认为5px         4.offy:指定阴影垂直方向上的偏移量，默认为5px         5.posit
css 中drop-shadow
u014645827的博客
04-25 1973
属性 css3 属性： filter: drop-shadow 滤镜 要使用标准的 css3 实现某元素的投影效果，有两个方法，第一个就是使用常见的 box-shadow ，第二个就是使用 css3 的 filter 阴影滤镜 drop-shadow。 filter 中的 drop-shadow 与 box-shadow 有同样的参数值，但表现效果有差异 例如： drop-shadow（图片内容轮廓阴影） box-shadow( 图片边框阴影) filter:drop-shadow(5px
css3 filter : drop-shadow 属性
weixin_45503733的博客
09-08 1877
drop-shadow
使用 CSS drop-shadow函数 为 PNG 透明图片添加设置阴影
最新发布
china-quanda
07-15 548
通常，我们为div盒子或者图片设置阴影使用box-shadow尽管有很好的支持，但 drop-shadow 滤镜仍然没有得到充分的利用。我希望这篇文章强调了一些使用 box-shadow的 情况，也许你可以在你的下一个项目中使用它！
drop-shadow 详解
热门推荐
热爱思考、活力满满、开朗爱笑的年轻人
02-24 2万+
属性 例子 png小图片变色 QA 关于兼容性 属性 css3 属性：filter: drop-shadow 滤镜 要使用标准的 css3 实现某元素的投影效果，有两个方法，第一个就是使用常见的 box-shadow ，第二个就是使用 css3 的 filter 阴影滤镜 drop-shadow。 filter 中的 drop-shadow 与 box-shadow 有...
css3dropshadow,详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
weixin_35062801的博客
08-04 315
要使用标准的CSS3实现某元素的投影效果，有两个套路，第一个就是使用常见的box-shadow, 第二个就是使用CSS3的filter阴影滤镜drop-shadow，那这两个阴影实现有什么具体的差异呢？一、兼容性不一CSS3 box-shadow从IE9浏览器开始就支持了，兼容性如下截图：详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用-1.png (45.6...
巧用CSS的Dropshadow滤镜
lqc851011的专栏
10-28 1232
<br />顾名思义就是添加对象的阴影效果。它的实际效果看上去就象是原来的对象离开了页面，然后在页面上显示出该对象的投影。其工作原理是建立一个偏移量，然后加上颜色.<br />语法：STYLE="filter:DropShadow(Color=color,OffX=offX,OffY=offY,Positive=positive)"<br />说明：Color:#rrggbb格式，任意。<br />Offx：X轴偏离值。<br />Offy：Y轴偏离值。<br />Positive：1或0。<br /> <
css3dropshadow,CSS3中filter:drop-shadow和box-shadow的区别
weixin_42464967的博客
08-04 351
今天来看两个比较相似的css属性，box-shadow/filter:drop-shadow。box-shadowbox-shadow可以添加阴影，基本用法为：box-shadow:h-shadowv-shadowblurspreadcolorinset;h-shadow表示阴影水平移动距离；v-shadow表示阴影垂直移动距离；blur表示阴影模糊范围；spread表示阴影宽度；co...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值