div+CSS制作类似微信对话气泡效果的实例总结

2020-05-07 06:37:04易采站长站整理

    margin-right: 73px;   
    _margin-rightright: 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 {