您的位置：首页 > Web前端 > CSS

为图片添加阴影效果---css3(box-shadow)

2012-08-29 14:16 731 查看

可在该网站调整阴影样式：

http://www.wordpressthemeshock.com/css-drop-shadow/

代码会在你调整之后出现，所以就勤快点多动动它吧！

我的测试页代码为：

<!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" content="text/html; charset=utf-8" />
<title>图片阴影</title>
</head>
<style type="text/css">
.class_box_shadow{
width: 555px;
min-width: 270px;
min-height: 130px;
margin: auto;
background: #ccc;
border: 5px solid white;
position:relative;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.8);
}
.sh_bottom{
width: 100%; height: 45%;
position:absolute;
z-index: -2;
bottom: 0; right: 0;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
-webkit-box-shadow: 0px 10px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 10px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 10px 2px rgba(0, 0, 0, 0.2);
}
.sh_bottom:after{
content: "";
position:absolute;
right: 0; bottom:0;
width:150px; height: 100px;
z-index: -1;
background: rgba(0, 0, 0, 0.2);
-moz-box-shadow: 20px 30px 8px rgba(0, 0, 0, 0.35);
-webkit-box-shadow: 20px 30px 8px rgba(0, 0, 0, 0.35);
box-shadow: 20px 30px 8px rgba(0, 0, 0, 0.35);
-moz-transform:skew(10deg,10deg) translate(-40px,-15px);
-webkit-transform:skew(10deg,10deg) translate(-40px,-15px);
transform:skew(10deg,10deg) translate(-40px,-15px);
}
.sh_bottom:before{
content: "";
position:absolute;
left: 0; bottom:0;
width:150px; height: 100px;
z-index: -1;
background: rgba(0, 0, 0, 0.2);
-moz-box-shadow: -20px 30px 8px rgba(0, 0, 0, 0.35);
-webkit-box-shadow: -20px 30px 8px rgba(0, 0, 0, 0.35);
box-shadow: -20px 30px 8px rgba(0, 0, 0, 0.35);
-webkit-transform:skew(-10deg,-10deg) translate(40px,-15px);
-moz-transform:skew(-10deg,-10deg) translate(40px,-15px);
transform:skew(-10deg,-10deg) translate(40px,-15px);
}
</style>
<body>

<div class="class_box_shadow"><img src="../web/images/002.jpg" /><div class="sh_bottom"></div></div>

</body>
</html>
图片效果（在IE浏览器里看不到理想的效果，所以记得要hack一下，火狐和谷歌都没有问题）：

效果还不错吧！！！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航