CSS3仿LOGO图片阴影特效

此代码仅供参考

---

代码说明

又一个CSS3阴影效果,个人感觉CSS3的阴影比传统的CSS滤镜实现的阴影更生动，阴影可以是无规则的，而且阴影的大小也是随时变化的，本例子就是用CSS3写成一个Logo，然后再加以阴影特效，重点不是展示阴影效果有多漂亮，而是如何去实现这种CSS3效果。

---

html代码

<style> .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_o{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> <div class="wrap"> <div class="font_o">o</div> <div class="tip"></div> <div class="tip_2"></div> </div>

---

代码演示

---

---