1.css3中通过border-radius实现圆角效果
.radius{
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
2.通过实现一个三角形充当气泡的尾巴，将容器的宽度以及高度设置为0，然后给盒容器设置一个较粗的边框，浏览器会在边框的交界处绘制结合线
.triangle{
height:0px;
width:0px;
border-width:20px;
border-style:solid;
border-color:green transparent transparent transparent;
}
为了减少不必须要的html元素，我们通过伪属性来给对话框添加”尾巴“
.left:before{
position:absolute;
content:"\00a0";
width:0px;
height:0px;
border-width:8px 18px 8px 0;
border-style:solid;
border-color:transparent #A6DADC transparent transparent;
top:15px;
left:-18px;
}
.right:before{
position:absolute;
content:"\00a0";
display:inline-block;
width:0px;
height:0px;
border-width:8px 0px 8px 18px;
border-style:solid;
border-color:transparent transparent transparent #A6DADC;
left:250px;
top:15px;
}
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属性可以给盒容器添加阴影效果，我们需要设置阴影相对盒容器水平以及垂直方向上的偏移，阴影的颜色以及模糊半径和扩展半径
-moz-box-shadow:1px 1px 2px hsla(0, 0%, 0%, 0.3);
-webkit-box-shadow:1px 1px 2px hsla(0, 0%, 0%, 0.3);
box-shadow:1px 1px 2px hsla(0, 0%, 0%, 0.3);
对话框外围有一层阴影，看起来更加立体，第一个1px表示阴影相对盒容器右移1px,第二个1px表示将阴影相对盒容器下移1px,可以设置为负数像相反的方向偏移。2px表示模糊半径，该值越大越模糊，越小边缘越锐利。
当鼠标移动到对话框的时候，改变对话框的位置以及阴影的大小，仿佛气泡弹出来一样
.talk:hover{
top:-2px;
left:-2px;
-moz-box-shadow:3px 3px 2px hsla(0, 0%, 0%, 0.3);
-webkit-box-shadow:3px 3px 2px hsla(0, 0%, 0%, 0.3);
box-shadow:3px 3px 2x hsla(0, 0%, 0%, 0.3);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>arrow</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
#box{
position: relative;
top:100px;
left:100px;
width: 140px;
height: 100px;
background: #088cb7;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
}
#box:before{
position: absolute;
content: "";
width: 0;
height: 0;
right: 100%;
top: 38px;
border-top: 13px solid transparent;
border-right: 26px solid #088cb7;
border-bottom: 13px solid transparent;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
