CSS3制作注释气泡.docVIP

这种方法的优点是所有浏览器都支持，缺点是比较麻烦，必须制作专门的图片，增加多余的标签，代码的灵活性较小。 ============================ 随着CSS3的出现，现在有了更好的方法，不需要任何背景图片和多余的标签，就能生成漂亮的文本框。 请看新方法发明人Nicolas Gallagher制作的范例： 由于这种方法用到了CSS3，所以IE6不支持，IE7和IE8无法显示圆角效果。其他浏览器的最新版本，都能够正常显示。 还是以前面的代码为例。 ? 　　blockquote class=bubble床前明月光，疑是地上霜。/blockquote ? 第一步，生成基本的方框。 ? 　　.bubble{　　　　position:relative;　　　　padding:15px;　　　　margin:1em 0em 3em;　　　　width:300px;　　　　line-height:1.2; 　　　　text-align:center;　　　　color:#fff;　　　　background:#075698;　　} ? 第二步，生成圆角。 ? 　　.bubble{　　　　-moz-border-radius:10px;　　　　-webkit-border-radius:10px;　　　　border-radius:10px;　　} ? 第三步，制作线性渐变的效果。 ? 　　.bubble{　　　　background:-webkit-gradient(linear, left top, left bottom, from(#f9d835), to(#f3961c));　　　　background:-moz-linear-gradient(top, #f9d835, #f3961c);　　　　background:-o-linear-gradient(top, #f9d835, #f3961c);　　　　background:linear-gradient(top, #f9d835, #f3961c);　　} ? 第四步，在容器后面添加一个空元素，并将长度和宽度都设为0。 ? 　　.bubble:after {　　　　content:\00a0;　　　　width:0;　　　　height:0;　　} ? 第五步，指定这个空元素为块级元素，并且四个边框之中，只显示上方的边框，其他三个边框，都设为透明。因为该元素的大小为0，所以它的每一个边框，都是一个等腰三角形。 ? 　　.bubble:after{　　　　display:block;　　　　border-style:solid;　　　　border-width:15px;　　　　border-color:#f3961c transparent transparent transparent;　　} ? 这时，已经可以看见这个三角形了（其实是一个上边框）。 第六步，指定空元素的定位方式为absolute。然后，以容器元素的左下角为基点，将空元素水平右移一定的距离（这里是50像素），再垂直下移两个边界的距离。（由于第五步将空元素的边界设为15像素，所以这里就是下移30像素。） ? 　　.bubble:after{ 　　　　position:absolute;　　　　z-index:-1;　　　　bottom:-30px;　　　　left:50px; 　　} ? 至此，一个不需要任何背景图片和多余标签的气泡框，就出现在我们眼前了。 灵活处理空元素的边框，或者改变大小，或者生成圆角，或者将两个空元素的边框重叠，就会产生各种各样的变化。具体的效果和代码，请参考Nicolas Gallagher的范例页。