CSS制作氣泡對話框

參考阮一峰的網絡日志，原文鏈接http://www.ruanyifeng.com/blog/2010/04/css_speech_bubbles.html

HTML代碼

<div class="bubble">Who are you?</div>

CSS代碼設置　　

第一步，生成基本的方框。

.bubble{
            position:relative;
            padding:15px;
            margin:1em 0em 3em;
            width:300px;
            line-height: 1.2;
            text-align: center;
            color:#fff;
            background:#FFB6C1;
}

第二步，生成圓角。

.bubble{
           
            border-radius: 10px;//圓角
            -moz-border-radius:10px;
　　　　     -webkit-border-radius:10px;
        }

第三步，在容器后面添加一個空元素，並將長度和寬度都設為0。

.bubble:after{
            content: "\00a0";//content 屬性與 :before 及 :after 偽元素配合使用，來插入生
                           成內容。設置文本或圖像出現（浮動）在另一個元素中的什么地方

            width:0;
            height: 0;
        }

 第四步，指定這個空元素為塊級元素，並且四個邊框之中，只顯示上方的邊框，其他三個邊框，都設為透明。因為該元素的大小為0，所以它的每一個邊框，都是一個等腰三角形。

.bubble:after{
            display:block;
            border-style:solid;
            border-width:15px;
            border-color:#fff transparent transparent transparent;
          
        }

 第五步，指定空元素的定位方式為absolute。然后，以容器元素的左下角為基點，將空元素水平右移一定的距離（這里是50像素），再垂直下移兩個邊界的距離。（由於第五步將空元素的邊界設為15像素，所以這里就是下移30像素。）

.bubble:after{
            position: absolute;
            z-index: -1;
            bottom:-30px;
            left:150px;
        }