你的位置:首页 > 网页设计

[网页设计]css3实现的气泡效果代码实例


css3实现的气泡效果代码实例:
本章节分享一段代码实例,它实现了气泡效果。
由于css3的强大功能,很多美观的效果可以不用使用图片。
代码实例如下:

<!DOCTYPE html><html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style>p.thought{   position:relative;   width:130px;   height:100px;   text-align:center;   line-height:100px;   background-color:#fff;   border:8px solid #666;   -webkit-border-radius:58px;   -moz-border-radius:58px;   border-radius:58px;   -webkit-box-shadow:2px 2px 4px #888;   -moz-box-shadow:2px 2px 4px #888;   box-shadow:2px 2px 4px #888;  }p.thought:before, p.thought:after{   content:'';   position:absolute;   left:10px;   top:70px;   width:40px;   height:40px;   background-color:#fff;   border:8px solid #666;   -webkit-border-radius:28px;   -moz-border-radius:28px;   border-radius:28px;   z-index:5;  }p.thought:after{   position:absolute;   width:20px;   height:20px;   left:5px;   top:100px;   -webkit-border-radius:18px;   -moz-border-radius:18px;   border-radius:18px;   z-index:6;  }      </style></head><body><p class="thought">蚂蚁部落</p> </body></html>

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=18338

更多内容可以参阅:http://www.softwhy.com/divcss/