CSS3实现容器box块的各种阴影效果

对照片同样有效，贴图image时只要把box的宽度高度设定成和图片一样的就行了。

HTML代码如下：

<div class="container">
<div class="box effect1">
	<h3>下阴影</h3>
</div>
<div class="box effect2">
	<h3>两边小阴影</h3>
</div>
<div class="box effect3">
	<h3>左下阴影</h3>
</div>
<div class="box effect4">
	<h3>右下阴影</h3>
</div>
<div class="box effect5">
	<h3>两边大阴影</h3>
</div>
<div class="box effect6">
	<h3>三边阴影</h3>
</div>
<div class="box effect7">
	<h3>四边阴影</h3>
</div>
<div class="box effect8">
	<h3>突起阴影</h3>
</div>
 </div>

CSS代码如下：

body{
	background:url(\'http://www.173it.cn/happy-easter-icons-image.jpg\');
	color:#888;
	padding:0;
	margin:0;
	font: 72.5% \'Helvetica Neue\', Helvetica, Arial, sans-serif; 
}
/*Container*/
.container{
	width:820px;
	margin:30px auto;
	padding:25px;
	min-height:400px;
	height:auto标签：

本文由胡金金个人网站整理发布，转载请注明地址：http://www.hujinjin.com/info/326.html

凡标明来源于胡金金个人网站的文章，皆为本站整理发布，若转载此文必须附原文链接，对部分平台更改其文内容当自己原创者，胡金金个人网站将保留其追究权利！

 
个人资讯推荐
                

                    

                    
    
windows xp系统介绍(并提供Ghost镜像下载)--纯净版和常用软件版
	
    
分享SEO网站编辑应该怎样更新文章
	
    
PHP INSERT INTO 返回ID 插入数据库返回操作ID（获取当前插入那条ID）
	
    
购买真正的云服务器，这几个方面要小心
	
    
数据库文件误删,几番波折终于恢复。顶下360的小工具
	
    
访问量过万的网站需要多大云服务器？
	
    
腾讯云服务器如何添加安全通信端口?
	
    
seo 收录量是什么意思？
	
    
欢迎大家关注胡金金官方微信！
	
    
Select选中项
	
    
黄才伦《虎口脱险》中国喜剧星_无法营救谢谢
	
    
  找到一个对的人，是给自己以后的生命里最好的礼物。
	
    
手机下载试玩赚钱平台稳定靠谱大集合
	
    
余姚市人民政府网