CSS无图片实现图片阴影_图片特效特效

图片阴影的CSS实现代码，用背景填充及Margins标签两者结合实现的效果，尝试修改这两个标签的参数会有不同的阴影效果，其实也可使用CSS的滤镜来实现本类效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" mrc="text/html; charset=utf-8" />
<title>CSS图片阴影</title>
<style type="text/css">
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0;}
ul,ol,li{list-style:none;}
input,button{margin:0;font-size:12px;vertical-align:middle;}
body{font-size:12px;font-family:Arial, Helvetica, sans-serif;  text-align:center; margin:0 auto; }
table{border-collapse:collapse;border-spacing:0;}
.clearfloat{height:0;font-size:1px;clear:both;line-height:0;}
a{color:#333;text-decoration:none;}
a:hover{color:#ef9b11; text-decoration:underline;}
.box {
position:relative;
background:#bbb;
margin:10px auto;
width:500px; 
height:365px;
}
.box01 {
background:#fff;
position:relative;
top:-5px;
left:-5px;
width:500px; 
height:365px;
}
</style>
</head>
<body>
	<div class="box">
		<div class="box01">
			<img src="http://p1.mb5u.com/texiao/1/20110225160546576.jpg" />
		</div>
	</div>
</body>
</html>

所属频道：图片特效特效/更新时间：2012-11-16

[收藏][报错][返回列表]

CSS无图片实现图片阴影_图片特效特效

图片特效特效Rss订阅特效代码搜索

图片特效特效推荐

猜你也喜欢看这些