DIV+CSS布局图片加阴影效果方法
DIV+CSS布局圖片加陰影效果方法
轉(zhuǎn)自：愛(ài)微網(wǎng)
<!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編寫(xiě)一個(gè)帶陰影的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>
轉(zhuǎn)載于:https://my.oschina.net/xixios/blog/81062
總結(jié)
以上是生活随笔為你收集整理的DIV+CSS布局图片加阴影效果方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： C#中的三种委托方式:Func委托，Ac
- 下一篇： CSS BOX类型和display属性