html⽓泡写法，制作CSS⽓泡框⽓泡状⽂本框，是⼀种很⽣动的⽹页设计⼿段。
它可以⽤来表⽰⽤户的发⾔。
也可以⽤来作为特定信息的提⽰符。
DVD租借⽹站Netflix，还⽤它显⽰碟⽚的详细信息。
=========================
制作CSS⽓泡框的传统⽅法，需要5张背景图⽚，分别是：
*
tl.gif，左上⽅的圆⾓。
*
tr.gif，右上⽅的圆⾓。
*css最新
bl.gif，左下⽅的圆⾓。
*
br.gif，右下⽅的圆⾓。
*
angle.gif，突出的三⾓形。
现在假定有这样⼀段代码：
床前明⽉光，疑是地上霜。
李⽩
我们希望通过⽓泡框，产⽣⼀种视觉效果，将李⽩与诗句对应起来。
那么，⾸先需要为诗句添加四个"钩⼦"(handler)：
床前明⽉光，疑是地上霜。
然后，为最外⾯的容器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的出现，现在有了更好的⽅法，不需要任何背景图⽚和多余的标签，就能⽣成漂亮的⽂本框。
由于这种⽅法⽤到了CSS3，所以IE6不⽀持，IE7和IE8⽆法显⽰圆⾓效果。其他浏览器的最新版本，都能够正常显⽰。还是以前⾯的代码为例。
床前明⽉光，疑是地上霜。
第⼀步，⽣成基本的⽅框。
.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的范例页。
(完)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。