CSS 气泡

来源：互联网发布：部落冲突地震数据编辑：程序博客网时间：2024/04/30 10:59

解析：
左布局案例：
头像，内容为一行两列的Table div float在字体多的时候无法达到以上效果

内容的td里面在分一个一行两列的左右布局
左边是左三角符号
右边是内容没有左上圆角的样式

头像对应的样式是tdtop
左右三角形分别对应left和right
左右内容样式分别是leftbubble 和rightbubble

三角符号的箭头位置代码
border-color: #f5f5f5 transparent transparent transparent;
border-color: transparent #f5f5f5 transparent transparent;
border-color: transparent transparent #f5f5f5 transparent;
border-color: transparent transparent transparent #f5f5f5
对应箭头上右下左-自己测试去。。。。 ;

对应圆角弧度：
-moz-border-radius: 0px 15px 15px 15px;
        -webkit-border-radius:0px 15px 15px 15px;
        border-radius: 0px 15px 15px 15px;
写法与上面类似
3个属性对应不同浏览器

css 样式
<style type="text/css">
    .leftbubble {
        padding: 10px;
        border: 2px solid #f5f5f5;
        /*-moz-border-radius: 15px;
        -webkit-border-radius: 15px;*/
        border-radius: 0px 15px 15px 15px;
        /* 这里以上是实现框框圆角化 */
        position: relative;
        background-color: #f5f5f5;
    }
    .rightbubble {
        padding: 10px;
        border: 2px solid #f5f5f5;
        -moz-border-radius: 0px 15px 15px 15px;
        -webkit-border-radius:0px 15px 15px 15px;
        border-radius: 0px 15px 15px 15px;
        /* 这里以上是实现框框圆角化 */
        position: relative;
        background-color: #f5f5f5;
    }
     .left {
        position: relative;
        right: -2px;
        border-width: 10px;
        border-style: solid dashed dashed dashed;
        font-size: 0;
        line-height: 0;
        border-color: transparent #f5f5f5 transparent transparent;
    }

    .right {
        position: relative;
        left: -2px;
        border-width: 10px;
        border-style: solid dashed dashed dashed;
        font-size: 0;
        line-height: 0;
        border-color: transparent transparent transparent #f5f5f5;
    }
    .tdtop {
        vertical-align: top;
    }
    table{
        border-collapse:collapse;
        border-width:0px;
    }
</style>

html
   <div>
                        <table>
                            <tr>
                                <td class="tdtop">头像</td>
                                <td>
                                    <table>
                                        <tr>
                                            <td class="tdtop"><div class="left"></div></td>
                                            <td>
                                                <div class="leftbubble">
                                                    //气泡框内容//气泡框内容//

                                                </div>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div>
                        <table style="float:right;">
                            <tr>
                                <td>
                                    <table>
                                        <tr>

                                            <td>
                                                <div class="rightbubble">
                                                    //气泡框内容//气泡框内容// //气泡框内容//气泡框内容// //气泡框内容//气泡框内容// //气泡框内容//气泡框内容// //气泡框内容//气泡框内容// //气泡框内容//气泡框内容// //气泡框内容//气泡框内容// //气泡框内容//气泡框内容// //气泡框内容//气泡框内容// //气泡框内容//气泡框内容// //气泡框内容//气泡框内容// //气泡框内容//气泡框内容// //气泡框内容//气泡框内容//

                                                </div>
                                            </td>
                                            <td class="tdtop"><div class="right"></div></td>
                                        </tr>
                                    </table>

                                </td>
                                <td class="tdtop">
                                    头像
                                </td>
                            </tr>
                        </table>
                        <div style="clear:both;"></div>
                    </div>

0 0