首页 > 代码库 > CSS3仿LOGO图片阴影特效
CSS3仿LOGO图片阴影特效
又一个CSS3阴影效果,个人感觉CSS3的阴影比传统的CSS滤镜实现的阴影更生动，阴影可以是无规则的，而且阴影的大小也是随时变化的，本例子就是用CSs3写成一个Logo，然后再加以阴影特效，重点不是展示阴影效果有多漂亮，而是如何去实现这种CSS3效果。
<!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>
<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>