CSS3編寫一個帶陰影的Logo效果

2024-09-05 12:17:19

字體：大中小

來源：轉載

供稿：網友

CSS3編寫一個帶陰影的Logo效果，請注意需要用chrome,firefox之類的來看，IE就不靈了。。

<!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效果</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   id="1vxz9zl"   class="wrap">	<div   id="p3vlb1r"   class="font_e">e</div>    <div   id="pl5rdrl"   class="tip"></div>    <div   id="hh9jvfd"   class="tip_2"></div></div></body></html>

上一篇：CSS3練習：css3迷宮游戲

下一篇：HTML5網頁Loading加載效果