以前我们要实现对话气泡效果很麻烦，基本上是用切图的方法。现在有了CSS3就变得简单多了。一个HTML元素，一些CSS3代码，不需要图片，也不需要JavaScript。 如下图：
主要使用了：before和：after伪类，直接上代码：
<!DOCTYPE html> <html> <head> <title></title> </head> <style type="text/css"> #demo{ position: relative; width: 200px; height: 100px; background-color: #fff; border: 8px solid #666; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; -webkit-box-shadow: 2px 2px 4px #888; -moz-box-shadow: 2px 2px 4px #888; box-shadow: 2px 2px 4px #888; } #demo:before{ content: ' '; position: absolute; width: 0; height: 0; left: 30px; top: 100px; border: 25px solid; border-color: #666 transparent transparent #666; } #demo:after{ content: ' '; position: absolute; width: 0; height: 0; left: 38px; top: 100px; border: 15px solid; border-color: #fff transparent transparent #fff; } </style> <body> <div id="demo"></div> </body> </html>