自从有了css3以后，网页样式更加多变，实现更加简单，以往需要多个标签来实现气泡样式，现在我们只需通过css3选择器的:before和:after即可实现。

普及下这两个选择器的知识：

其实这两个是伪类选择器

伪类选择器： 和一般的DOM中的元素样式不一样，它并不改变任何DOM内容。只是插入了一些修饰类的元素，这些元素对于用户来说是可见的，但是对于DOM来说不可见。伪类的效果可以通过添加一个实际的类来达到。

比如大家最熟悉的a标签里面就有a:hover, a:link,  a:visited , a:link

:before 在某个元素之前插入一些内容；

:after 在某个元素之后插入一些内容；

气泡样式应该还蛮多的，最常用的当属聊天界面，比如微信对话，QQ聊天界面，都有气泡框，下面我们来详细讲解css3的实现方法：

先看样式:

图1

实现原理：

如果一个div的高度和宽度都是0，只有边框有宽度

比如：

    .test {
        border-width: 8px;
        border-color: #ff0000;
        border-style: solid;
        border-color: #09F #990 #933 #0C9;
        height: 0;
        width:0;
    }

样式如下：

图2:

看到这，聪明的同学可能已经看出来了，只要把这个里面其中一个三角结合到一般的框框外面，他就是一个气泡框，当然要做成和图1那样，三角是里面是白色，框框是有颜色的，需要两个三角形叠加，然后两者产生一定的位移，才能形成最终效果。

原理讲过以后，下面就是代码实现了，我分别针对三角在四个方向做了实现，方便大家从代码层面理解

当然我这只是抛砖引玉，其实气泡框不一定是等边的三角箭头，也可以是圆滑的三角箭头或不规则三角箭头，原理都是差不多，最终都是通过位移和两个三角形的边框颜色来设计符合你的需求的气泡框。