您的位置：首页 > Web前端 > CSS

CSS 气泡

2017-03-23 22:16 323 查看

解析：

左布局案例：

头像，内容为一行两列的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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： CSS 气泡气泡效果 css气泡效果气泡样式聊天气泡

相关文章推荐

新的分享

章节导航