气泡状文本框，是一种很生动的网页设计手段。
它可以用来表示用户的发言。
也可以用来作为特定信息的提示符。
DVD租借网站Netflix，还用它显示碟片的详细信息。
=========================
制作CSS气泡框的传统方法，需要5张背景图片，分别是：
*
tl.gif，左上方的圆角。
*
tr.gif，右上方的圆角。
*
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的范例页。
纯CSS气泡框实现方法探究
气泡框(或者提示框)是网页中一种很常见的元素,大多用来展示提示信息,如下图所示: 拆分来看,形如这种气泡框无外乎就是一个矩形框+一个指示方向的三角形小箭头,要制作出这样的气泡框,如果解决了三角形小箭头 ...
辛星和您一起手写CSS气泡
上文中我公布了一篇手写导航条的博客,那么这一篇博客我将和大家一起手写气泡.那么什么是气泡呢?先给那些刚入门的童鞋一个截图,来更好的认识一下什么是气泡把: 这就是一个简单的气泡啦,那么它主要用来干什么呢 ...
纯CSS气泡效果
http://www.liaoxuefeng.com/article/0013738937970388b6b6e5e5e2f4e21b65b01807c84ddf6000
纯CSS实现箭头、气泡让提示功能具有三角形图标(简单实例)
css border制作小三角形状及气泡框(兼容IE6)
先看下CSS盒模型 一个盒子包括: margin+border+padding+content 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三 ...
一个CSS中Z-index的用法
一个CSS中Z-index的用法 CSS教程:彻底掌握Z-index属性 大多数的CSS属性都很容易使用.常常,当您对标记语言的元素使用CSS属性时,产生的结果会随着您刷新页面而立即呈现.而另 ...
CSS三角形的实现原理及运用
原理 css盒模型 一个盒子包括: margin+border+padding+content– 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小 ...
10款精美的web前端源码的特效
1.HTML5侧滑聊天面板 很酷的聊天界面 这是一款基于HTML5和SVG的侧滑聊天面板,初始化的时候聊天面板是锁定的,当你拖动白色区域时,即可解锁展开聊天面板,显示所有好友.点击面板中的好友即可切换 ...
随机推荐
使用 python 获取 Linux 系统信息(通过dmidecode命令)
通过 dmidecode 命令可以获取到 Linux 系统的包括 BIOS. CPU.内存等系统的硬件信息,这里使用 python 代码来通过调用 dmidecode 命令来获取 Linux 必要的系 ...
UIBUTTON titlelabel.text 不显示
button.titlelabel.text=@"查询";设置后运行发现没事正确显示. 查找后原来UIButton分状态的,textLabel不管用 [button setTitl ...
**PHP中替换换行符
PHP中替换换行符 php 不同系统的换行不同系统之间换行的实现是不一样的linux 与unix中用 \nMAC 用 \rwindow 为了体现与linux不同 则是 \r\n所以在不同平台上 实现方 ...
Android性能优化方法(八)
Android SDK tools目录下提供一个观察布局的工具,层级观察器(Hierarchy Viewer).Hierarchy Viewer工具是一个非常好的布局优化工具,同时,你也可以通过它学习 ...
隔一段时间应用就会挂掉(进程在，但停止响应，也无log输出)，必须重启tomcat
此处是转载的 是给自己做的备注 问题:隔一段时间应用就会挂掉(进程在,但停止响应,也无log输出),必须重启tomcat 原因查找:由于tomcat自身log中并无错误产生,磁盘空间足够,读写也正常 ...
RFM模型
python信用评分卡(附代码,博主录制) https://study.163.com/course/introduction.htm?courseId=1005214003&utm_camp ...
HTML-入门篇day01
HTML-入门篇day01 1.web C/S:Client Server 客户端 服务器 QQ,... B/S:Browser Server 浏览器 服务器 PC机: ...
thinkphp3.2 success方法和redirect方法
$this->redirect('showlist',array(),3,'添加成功'); $this->success('添加成功',U('showlist'),3);
Linux 系统的文件类型
Linux文件类型常见:普通文件.目录文件.字符设备文件和块设备文件.符号链接文件 1.1. 普通文件(-) ls -lh 来查看某个文件的属性,可以看到有类似-rwxrwxrwx,值得注意的是第一个 ...
Java设计模式-简单工厂模式(Static Factory Method)
简单工厂模式(Static Factory Method) 简单工厂模式是类的创建模式,又叫静态工厂方法(Static Factory Method)模式.简单工厂模式是由一个工厂对象决定创建出哪一种 ...