css3实现气泡效果的聊天框

因为CSS3尚未形成标准，所以现行的浏览器对于css3支持不太一致，某些特性需要加上浏览器前缀

没有添加css3样式之前原始页面如下：

1.第一步，实现圆角效果，在css之前实现圆角效果比较麻烦，但是css3中通过border-radius可以很容易实现圆角效果

[html] view plain copy

1. .radius{
2. -webkit-border-radius:10px;
3. -moz-border-radius:10px;
4. <span>  </span>border-radius:10px;
5. }

添加之后效果如图，border-radius:x/y,如果x和y不相同，x表示横轴，y表示纵轴，如果x和y不相同，那么绘制的为椭圆形。

可以通过设置border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius分别设置边框四个角的弧度。

2.第二步，添加气泡的尾巴。

可以通过css来实现一个三角形充当气泡的尾巴，将容器的宽度以及高度设置为0，然后给盒容器设置一个较粗的边框，浏览器会在边框的交界处绘制结合线

[html] view plain copy

1. .triangle{
2. height:0px;
3. width:0px;
4. border-width:20px;
5. border-style:solid;
6. border-color:green black blue red;
7. }

绘制出的图形如下：

通过将另外三条边设置为透明的，即可得到一个三角形

[html] view plain copy

1. .triangle{
2. height:0px;
3. width:0px;
4. border-width:20px;
5. border-style:solid;
6. border-color:green transparent transparent transparent;
7. }

为了减少不必须要的html元素，我们通过伪属性来给对话框添加”尾巴“

[html] view plain copy

1. .left:before{
2. position:absolute;
3. content:"\00a0";
4. width:0px;
5. height:0px;
6. border-width:8px 18px 8px 0;
7. border-style:solid;
8. border-color:transparent #A6DADC transparent transparent;
9. top:15px;
10. left:-18px;
11. }
12. .right:before{
13. position:absolute;
14. content:"\00a0";
15. display:inline-block;
16. width:0px;
17. height:0px;
18. border-width:8px 0px 8px 18px;
19. border-style:solid;
20. border-color:transparent transparent transparent #A6DADC;
21. left:250px;
22. top:15px;
23. }

添加样式之后效果如图：

3.第三步，我们继续对输入框进行美化，通过hsla或者rgba实现半透明背景

目前输入框是通过十六进制来设置颜色

background-color:#A6DADC

还可以通过

background-color:rgb(166, 218,220)

background-color:rgba(166, 218,220,1)

background-color:hsl(182, 44%,76%)

background-color:rgba(182, 44%,76%,1)

在rgba模式中，前三个数字表示红，绿，蓝的值，取值范围为0~255，最后一个表示透明度

在hsla模式中，前三个数字分别表示色调（取值范围为0~360），饱和度（0%~100%），和亮度（0%~100%），最后一个参数表示透明度。

设置透明背景后效果图如下：可以看到背景花纹

接下来我们给聊天对话框设置一个背景渐变的效果，使背景框更加立体：

可以将linear-gradient,radial-gradient赋值给任何接受图片的属性

background-image:-moz-linear-gradient(hsla(0,0%,100%, 0.6), hsla(0, 0%, 100%, 0)  30px);

background-image:-webkie-gradient(linear, 0 0, 0 30, from(hsla(0, 0%, 100%, 0.6)), to(hsla(0, 0%, 100%, 0)));

效果图：

接下来我们给对话框添加阴影，使其有立体的效果：

box-shadow属性可以给盒容器添加阴影效果，我们需要设置阴影相对盒容器水平以及垂直方向上的偏移，阴影的颜色以及模糊半径和扩展半径

[html] view plain copy

1. -moz-box-shadow:1px 1px 2px hsla(0, 0%, 0%, 0.3);
2. -webkit-box-shadow:1px 1px 2px hsla(0, 0%, 0%, 0.3);
3. box-shadow:1px 1px 2px hsla(0, 0%, 0%, 0.3);

效果图如下：对话框外围有一层阴影，看起来更加立体，第一个1px表示阴影相对盒容器右移1px,第二个1px表示将阴影相对盒容器下移1px,可以设置为负数像相反的方向偏移。2px表示模糊半径，该值越大越模糊，越小边缘越锐利。

继续给其添加特效，当鼠标移动到对话框的时候，改变对话框的位置以及阴影的大小，仿佛气泡弹出来一样

[html] view plain copy

1. .talk:hover{
2. top:-2px;
3. left:-2px;
4. -moz-box-shadow:3px 3px 2px hsla(0, 0%, 0%, 0.3);
5. -webkit-box-shadow:3px 3px 2px hsla(0, 0%, 0%, 0.3);
6. box-shadow:3px 3px 2x hsla(0, 0%, 0%, 0.3);
7. }