对话气泡效果很流行，但是很多教程里的实现都依赖于表现性的HTML或者javascript。这篇教程里包含了用CSS2.1和CSS3实现的不同形式的对话气泡效果，没有用到图片，也没有用到javascript，你可以把它用在你的语义化HTML上。
演示页面用到的CSS文件已经经过详细的注释，你可以看到每个效果具体是由哪些代码实现的。
演示页面： 纯CSS实现对话气泡 （我：请使用支持CSS3的浏览器看，例如FF3.6+，Opera 10.10+，Chrome 4.0+， Safari 4.0+）
纯CSS实现的对话气泡
通过简单如<div>Content</div> or <p>Content</p>的HTML代码，你可以产生如下的对话气泡效果：
增加一个子元素，例如<blockquote><p>Quote</p></blockquote>，你甚至可以创建如下效果的对话气泡：
我鼓励你根据自己的实际需求去使用这些实例，在你的HTML文档中使用其他相关的元素。关键是使用:before和/或 :after这两个伪类去产生基本的形状。
通过使用诸如圆角和变形这些CSS3属性，你可以产生一些更为复杂的形状和方位。这也是我CSS typography experiment里心型的实现方法。
实例代码
这是创建一个经过一些改进的基础对话气泡的例子。更多的实例请看演示页面和它使用到的经过详细注释的CSS文件。
/* Bubble with an isoceles triangle
------------------------------------------ */
.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);
}
/* creates triangle */
.triangle-isosceles:after {
content:"\00a0";
display:block; /* reduce the damage in 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;
}
关于渐进增强
这篇文章里使用到的方法也属于“渐进增强”。样式先是简单的填充了颜色的盒子，然后变成了类似对话框的盒子，继而变成具有渐变背景的圆角矩形或者圆形，最后浏览器根据自身的渲染能力对样式进行渲染。
那些不完全支持CSS2.1的浏览器（例如IE6和IE7）或者不支持需要用到的CSS3属性的浏览器（例如IE8）并不会看到惨不忍睹的画面，它们只是不会有呈现完全的对话气泡效果。但是……
关于Firefox 3.0的警告
Firefox 3.0支持必需的CSS2.1伪类但是却不支持所产成内容的定位。
一些例子在Firefox3.0上的效果已经烂到接近了我所能接受的底线了。它是唯一一个市场份额超过2%（根据NetApplications统计，截至2010年3月为止大约为4%）但是却连基本的对话气泡效果都实现不了的浏览器。
在使用这个技术前，请考虑下支持Firefox3.0的重要性以及你的用户使用这个浏览器所占的比例。虽然它最终会成为一个很少人使用的浏览器，但是基于它对CSS2.1的不完全支持，你应该意识到使用这个技术的时候并没有针对Firefox3.0的很好的后备方案。
Translated by icyfire @ Canaand on Tue, 16th Mar. 2010
原文：Progressive enhancement: pure CSS speech bubbles
作者：Nicolas Gallagher
