css 对话框-白红宇的个人博客

css 对话框

发布日期：2021-05-07 10:43:46 浏览次数：22 分类：原创文章

本文共 1695 字，大约阅读时间需要 5 分钟。

<html><head>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">    <meta name="format-detection" content="telephone=no">    <title>css 对话框</title></head><style>    .row {        margin-top: 15px;        width: 100%;        overflow: hidden;    }    .chatframe{        min-width: 100px;        min-height: 30px;         position: relative;        border-radius: 10px;        padding: 10px;           }    .chatframe:before{        content: "";        position: absolute;        top: 14px;        border-top: 6px solid transparent;           border-bottom: 6px solid transparent;    }    .opposite .chatframe{        background: #ccc;        margin-left: 20px;        float:left;    }    .opposite .avatar{        float:left;    }    .opposite .chatframe::before{        right: 100%;        border-right: 10px solid #ccc;    }    .self .chatframe{        background: #6D9CF8;        margin-right: 20px;        float:right;    }    .self .avatar{        float:right;    }    .self .chatframe::before{        left: 100%;        border-left: 10px solid #6D9CF8;    }    .img{        width:40px;        height: 40px;        border-radius: 20px;        background:red;    }</style><body>    <div class="row opposite">        <div class="avatar"><div class="img"></div></div>        <div class="chatframe l">            <div class="content">                雪儿，早上好^^            </div>         </div>    </div>    <div class="row self">        <div class="avatar"><div class="img"></div></div>        <div class="chatframe r">            <div class="content">                恩，早上好^_^            </div>        </div>    </div></body></html>

上一篇：css background 属性详解

下一篇：4-6 在Vue中使用插槽

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

发表评论

最新留言

关于作者

推荐文章