气泡状文本框，是一种很生动的网页设计手段。它可以用来表示用户的发言。 也可以用来作为特定信息的提示符。 DVD租借网站Netflix，还用它显示碟片的详细信息。 ========================= 制作CSS气泡框的传统方法，需要5张背景图片，分别是： * tl.gif，左上方的圆角。 * tr.gif，右上方的圆角。 * bl.gif，左下方的圆角。 * br.gif，右下方的圆角。 * angle.gif，突出的三角形。 现在假定有这样一段代码： blockquote床前明月光，疑是地上霜。/blockquote p李白/p 我们希望通过气泡框，产生一种视觉效果，将李白与诗句对应起来。 那么，首先需要为诗句添加四个“钩子”（handler）： div class=”tl” div class=”tr” div class=”br” div class=”bl” blockquote床前明月光，疑是地上霜。/blockquote /div /div /div /div 然后，为最外面的容器div.tl指定高度和宽度，使它形成一个视觉方框： .tl{ width:300px; height:50px; text-align:center; line-height:50px; } 接着，为四个“钩子”依次添加四个不同的圆角背景： .tl{background:url(‘tl.gif’) top left no-repeat #ff8c45;} .tr{background:url(‘tr.gif’) top right no-repeat;} .bl{background:url(‘bl.gif’) bottom left no-repeat;} .br{background:url(‘br.gif’) bottom right no-repeat;} 最后，在“李白”前面加上三角形图片。 p{ padding: 15px 0px 0px 50px; background: url(‘angle.gif’) 40px top no-repeat; } 气泡框就生成了。 这种方法的优点是所有浏览器都支持，缺点是比较麻烦，必须制作专门的图片，增加多余的标签，代码的灵活性较小。 ============================ 随着CSS3的出现，现在有了更好的方法，不需要任何背景图片和多余的标签，就能生成漂亮的文本框。 请看新方法发明人Nicolas Gallagher制作的范例： 由于这种方法用到了CSS3，所以IE6不支持，IE7和IE8无法显示圆角效果。其他浏览器的最新版本，都能够正常显示。 还是以前面的代码为例。 blockquote …
