DIV+CSS布局图片加阴影效果方法

猫性男孩 · 发表于 2013-4-2 16:47:10

[code=Xml width=600px]<!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>CSS3编写一个带阴影的Logo效果www.iiwnet.com</title>
<style>
*{margin:0;padding:0;line-height:1.5;font-size:1px;}
.wrap{ width: 240px; height: 240px;
border-bottom-left-radius: 120px;
border-bottom-right-radius: 120px;
border-top-right-radius: 120px;
background:#b1e4ff;
border:2px solid #789cb6;
box-shadow: 5px 5px 7px #999;
-moz-border-bottom-left-radius: 120px;
-moz-border-bottom-right-radius: 120px;
-moz-border-top-right-radius: 120px;
position:relative;margin:10px;
}
.font_e{font-size:300px;color:#fff; position:absolute;left:0;top:0;width: 240px; height: 240px;text-align:center;
line-height:210px; font-family:"Arial", Gadget, sans-serif;}
.tip{border-color:#fff transparent transparent transparent;border-style:solid;border-width:50px;font-size:0; position:absolute;top:-40px;left:-40px;
-webkit-transform: rotateZ(135deg);
-moz-transform: rotate(135deg);
transform: rotateZ(135deg);
}
.tip_2{width:50px;height:50px; background:#fff; position:absolute;top:25px; left:25px;
-webkit-transform: rotateZ(135deg);
-moz-transform: rotate(135deg);
transform: rotateZ(135deg);
}
</style>
</head>

<body>
<div class="wrap">
<div class="font_e">e</div>
<div class="tip"></div>
<div class="tip_2"></div>
</div>
</body>
</html>[/code]

		自动登录	找回密码
密码			立即注册

[教程] DIV+CSS布局图片加阴影效果方法

站长推荐 /1