這次帶給大家css3的聊天氣泡樣式，做出css3的聊天氣泡樣式的注意事項有哪些，下面就是實戰案例，一起來看一下。
在聊天的場景中，聊天內容需要用到氣泡修飾，如下圖。下面一一講解。
圖片式：
第一個樣式是京東客服，氣泡的圓角和鉤子都是用圖片了。使用了一個table組合成了一個圓角的框框。 lm樣式拼出了鉤子。
<p class="jimi_lists clearfix">
<p class="header_img jimi3 fl"></p>
<table class="msg" cellspacing="0" cellpadding="0">
<tbody><tr><td class="lt"></td><td class="tt"></td><td class="rt"></td></tr>
<tr><td class="lm"><span></span></td><td class="mm"><span class="wel"><span class="visitor"><p>很抱歉，现在人工客服忙，让小JIMI为您解答吧。</p></span></span></td><td class="rm"></td></tr>
<tr><td class="lb"></td><td class="bm"></td><td class="rb"></td></tr><tr><td></td></tr>
</tbody>
</table>
</p>
<p class="customer_lists clearfix">
<p class="header_img jimi3" style="background: url(img/mine.jpg) no-repeat center;">
<p class="header_img_hover"></p>
</p>
<table class="msg" cellspacing="0" cellpadding="0"><tbody><tr><td class="lt"></td><td class="tt"></td><td class="rt"></td></tr><tr><td class="lm"></td><td class="mm">你好，我是stoneniqiu</td><td class="rm"><span></span></td></tr><tr><td class="lb"></td><td class="bm"></td><td class="rb"></td></tr><tr><td></td><td class="time"></td><td></td></tr></tbody></table>
</p>
登入後複製
樣式：
.jimi_lists {
margin: 0 -10px 20px 10px;
position: relative;
}
.jimi_lists .header_img.jimi3 {
background: url(../img/jimi_50_3.png) no-repeat 0 0;
}
.jimi_lists .header_img {
width: 50px;
height: 50px;
position: absolute;
top: 0;
left: 0;
}.fl {
float: left;
}
.jimi_lists .msg {
margin-left: 59px;
margin-right: 40px;
margin-top: 2px;
float: left;
display: inline;
}
.jimi_lists .lt {
background: url(../img/msg_bg_lr.png) no-repeat 0 0;
width: 26px;
height: 10px;
}
.jimi_lists .tt {
background: url(../img/msg_bg_tb.png) repeat-x 0 -23px;
height: 10px;
}.jimi_lists .rt {
background: url(../img/msg_bg_lr.png) no-repeat -35px 0;
width: 10px;
height: 10px;
}.jimi_lists .lm {
background: url(../img/msg_bg_lr.png) repeat-y -94px 0;
width: 26px;
vertical-align: top;
position: relative;
}.jimi_lists .mm {
padding: 0 5px;
background-color: #FFF;
word-break: break-all;
word-wrap: break-word;
color: #333;
line-height: 20px;
}.jimi_lists .lm span {
background: url(../img/msg_bg_lr.png) no-repeat 0 -14px;
display: inline-block;
width: 26px;
height: 16px;
position: absolute;
top: 5px;
}.jimi_lists .rm {
background: url(../img/msg_bg_lr.png) repeat-y -113px 0;
width: 10px;
}.jimi_lists .lb {
background: url(../img/msg_bg_lr.png) no-repeat 0 -43px;
width: 10px;
height: 10px;
}.jimi_lists .bm {
background: url(../img/msg_bg_tb.png) repeat-x 0 -25px;
height: 10px;
}.jimi_lists .rb {
background: url(../img/msg_bg_lr.png) no-repeat -35px -43px;
width: 10px;
height: 10px;
}.customer_lists {
position: relative;
margin: 0 12px 20px 20px;
}.customer_lists .msg {
float: right;
margin-right: 73px;
_margin-right: 38px;
margin-top: 2px;
}.customer_lists .lt {
background: url(../img/msg_bg_lr.png) no-repeat -47px -0;
width: 10px;
height: 10px;
}.customer_lists .tt {
background: url(../img/msg_bg_tb.png) repeat-x 0 0;
height: 10px;
}.customer_lists .rt {
background: url(../img/msg_bg_lr.png) no-repeat -63px 0;
width: 26px;
height: 10px;
}.customer_lists .lm {
background: url(../img/msg_bg_lr.png) repeat-y -126px 0;
width: 10px;
}.customer_lists .mm {
padding: 1px 8px;
background-color: #3897E7;
word-break: break-all;
word-wrap: break-word;
color: #FFF;
}.customer_lists .rm {
background: url(../img/msg_bg_lr.png) repeat-y -129px 0;
width: 26px;
vertical-align: top;
position: relative;
}.customer_lists .lb {
background: url(../img/msg_bg_lr.png) no-repeat -47px -36px;
width: 10px;
height: 10px;
}.customer_lists .bm {
background: url(../img/msg_bg_tb.png) repeat-x -106px -4px;
height: 10px;
}.customer_lists .rb {
background: url(../img/msg_bg_lr.png) no-repeat -63px -36px;
width: 26px;
height: 10px;
}.customer_lists .rm span {
background: url(../img/msg_bg_lr.png) no-repeat -63px -14px;
display: inline-block;
width: 26px;
height: 16px;
position: absolute;
top: 5px;
}.customer_lists .header_img_hover {
position: absolute;
background: url(../img/avatar_mask_01.png);
top: 0;
width: 50px;
height: 50px;
}.customer_lists .header_img {
position: absolute;
top: 0;
right: 14px;
width: 50px;
height: 50px;
}
.clearfix:after {
content: " .";
display: block;
clear: both;
visibility: hidden;
height: 0;
}登入後複製
View Code
背景式：
第二種主要是使用了：before偽類別畫出了三角形，然後用定位拼在了一起。
<p class="jimi_lists clearfix">
<p class="header_img jimi3 fl"></p>
<p class="bkbubble right">
<p>换个气泡如何</p>
</p>
</p>
<p class="customer_lists clearfix">
<p class="header_img jimi3" style="background: url(img/mine.jpg) no-repeat center;">
<p class="header_img_hover"></p>
</p>
<p class="bkbubble left">
<p>这个不错</p>
</p>
</p>
登入後複製
樣式：
.bkbubble.right p:before, .bkbubble.left p:before {
width: 0;
position: absolute;
top: 12px;
border-style: solid;
content: "";
}
.bkbubble.left {
text-align: right;
}
.bkbubble.right p:before {
left: -12px;
border-color: transparent #00bfff;
border-width: 0 12px 12px 0; }
.bkbubble.left p:before {
right: -12px;
border-color: transparent #00bfff;
border-width: 0 0 12px 12px ; }登入後複製
更多三角形：http://www.cnblogs.com/lhb25/p/css-and-css3-triangle.html
#邊框式：
如果要求邊框顏色和背景顏色不一樣呢？上面的方法就不行了，因為用:before畫三角形是利用border的原理，也就是說，在上面這種方式下，氣泡邊上的小三形是無法呈現兩種顏色的，因為他只有一個border的顏色。那就要想辦法湊出一個有邊框的三角形了。
<p class="jimi_lists lim_operator clearfix">
<p class="header_img jimi3 fl"></p>
<p class="lim_bubble lim_shadow"><p class="lim_dot">您好，请问有什么可以帮到您？</p></p>
<p class="lim_tale"><p class="radiusborder"></p></p>
</p>
登入後複製
1.先畫一個小矩形。
.lim_operator .lim_tale {
left: -1px;
background-color: #c8f064;
border-color: #a5d01b;
margin-left: 70px;
}.lim_tale {
position: absolute;
width: 12px;
height: 8px;
overflow: hidden !important;
top: 10px;
z-index: 2;
border-top-style: solid;
border-top-width: 1px;
}登入後複製
2.畫出斜線。
css裡面是沒有斜線的，這裡是用了一個園的弧形拼出來的。在一個大圓上，截取一段弧，就是一條斜線了。
.lim_operator .radiusborder {
position: absolute;
background-color: #EFF0F2;
top: -29px;
left: -94px;
height: 160px;
width: 160px;
border-top-style: solid;
border-top-width: 1px;
border-right-style: solid;
border-right-width: 1px;
border-top-right-radius: 154px;
border-color: #a5d01b;
}登入後複製
疊加式：
原理就是相當於用before先畫出一個有色背景，再用after畫出一個白色背景，然後疊加錯開頂部1-2px，這樣就出現了一個有邊框有背景的三角形。 web 微信就是這種做法
.expression:before {
content: '';
position: absolute;
left: 16px;
top: 100%;
margin-left: -7px;
border: 7px solid transparent;
border-top-color: #CFCFCF}.expression:after {
content: '';
position: absolute;
left: 16px;
top: 100%;
margin-left: -7px;
margin-top: -1px;
border: 7px solid transparent;
border-top-color: #FFF}登入後複製
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
JavaScript的var與this，{}與function
ss3的漸變如何使用
以上是css3的聊天氣泡樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！
