原文地址：http://nicolasgallagher.com/progressive-enhancement-pure-css-speech-bubbles/
作者：Nicolas Gallagher
译者：米随随
聊天泡泡做为一种UI表现形式是广大网民群众所喜闻乐见，但许多教程实现它却总是需要上使用非语义的HTML或者JavaScript。而本教程中 的各种聊天泡泡只需要使用到CSS2.1来构建，并用CSS3来增强效果。不使用图片，也不使用JavaScript和更加不使用当前语义没用到的 HTML哦。
在CSS文件中有大量对代码的注释，可以让你方便的看懂这些代码。（译者：在翻译时作者要求DEMO页面要用原先的网址，所以这些注释没有翻译，当然当你 看完本文，了解清楚实现方式，哪么不看注释也是可以看懂代码。）
查看DEMO：纯 CSS聊天泡泡
纯CSS聊天泡泡
只需要简单的HTML代码： <div>Content</div> 或 <p>Content</p> 就可以做出以下的聊天泡泡效果：
如果再添加一个子元素，例如 <blockquote>Quote</blockquote> 再可以做出这样的聊天泡泡效果：
我建议您使用伪类 :before 和（或者） :after 来创建HTML文档中没有写入的DOM并且用CSS来控制他们的表现。（译者：这里就是本文最为关键的一句话了，伪类在非IE的浏览器 中竞然可以在HTML中创建一个DOM元素，并且可以用CSS来控制哦~哪么为什么伪类会表形成一个DOM元素呢，可能浏览器为了实现伪类的效果而产生 的，这里则被作者发现并利用了。）
再使用CSS3中的 border-radius 和 transform 就可以来表现更为复杂的图形，更详情的说明请看《CSS typography experiment》（译者：本文未翻译）
示例代码
以下代码主要是创建一个有几个最基本的渐进增强型聊天泡泡的DEMO。更多的DEMO请看 纯 CSS聊天泡泡 及在 相 关CSS文件 使用。
- /* 泡泡及小三角
- ------------------------------------------ */
- .triangle-isosceles {
- position:relative;
- padding:15px;
- margin:1em 0 3em;
- color:#000;
- background:#f3961c;
- /* 这里是用CSS3来控制圆角和渐变效果 */
- -moz-border-radius:10px;
- -webkit-border-radius:10px;
- border-radius:10px;
- background:-moz-linear-gradient(top, #f9d835, #f3961c);
- background:linear-gradient(top, #f9d835, #f3961c);
- }
- /* 创建三角形（译者：请注意这里，这里就是在控制伪类所创建的DOM元素） */
- .triangle-isosceles:after {
- content:"0a0";
- display:block; /* 针对 FF3.0 */
- position:absolute;
- z-index:-1;
- bottom:-30px;
- left:50px;
- width:0;
- height:0;
- border-width:15px 15px;
- border-style:solid;
- border-color:#f3961c transparent transparent;
- }
