1. p.speech{    position: relative;   
2. width: 200px;    height: 100px;   
3. text-align: center;    line-height: 100px;   
4. background-color: #fff;    border: 8px solid #666;   
5. -webkit-border-radius: 30px;    -moz-border-radius: 30px;   
6. border-radius: 30px;    -webkit-box-shadow: 2px 2px 4px #888;   
7. -moz-box-shadow: 2px 2px 4px #888;    box-shadow: 2px 2px 4px #888;   
8. }  

沒(méi)有什么特別復(fù)雜的，主要的核心就在postion:relative，用來(lái)定位對(duì)話浮層的。我們還需要一些Mozilla和webkit的屬性來(lái)完成圓角和陰影，IE8以下的瀏覽器看不到這些屬性，只是顯示一個(gè)框，不影響總體的效果。

我們現(xiàn)在需要?jiǎng)?chuàng)建對(duì)話浮層下面的那個(gè)三角形的指向標(biāo)志了。不使用圖片，我們使用CSS邊框來(lái)完成這個(gè)效果。看看下面這個(gè)用不同顏色邊框完成的效果。

我們把高度和寬度減少到0px，然后給邊框使用不同的大小，看看效果：

為了最后能做成指示標(biāo)志的樣子，我們把上邊距和左邊距設(shè)置為solid，下邊距和右邊距設(shè)置為透明：

但是我們把這個(gè)放哪呢？還好，我們可以使用CSS的偽類:before和:after來(lái)生成，所以：