CSS3实现气泡效果

来源：互联网发布：泳道流程图制作软件编辑：程序博客网时间：2024/04/30 05:28

以前我们要实现对话气泡效果很麻烦，基本上是用切图的方法。现在有了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>

0 0