简单对话框样式案例

写一个简单的对话框样式，供参考

代码如下：

<!doctype html>
<html>
    <head>
        <meta content="text/html;charset=utf-8" http-equiv="content-type" />

        <!----样式开始---->
        <style>
            .tip-bubble {
                position: relative;
                background-color:rgba(242, 240, 240, 1);
                padding:10px 20px 10px 20px;
                color:rgba(0,0,0, 0);
                border-radius: 10px;
                border: 1px solid rgba(242, 240, 240, 1);
            }
            .tip-bubble:after {
                content: '';
                position: absolute;
                width: 0;
                height: 0;
                border: 15px solid;
                border-bottom-color: rgba(242, 240, 240, 1);
                left: 50%;
                bottom: 100%;
                margin-left: -15px;
            }

            <!--
                这里是设置对话框内的div中的字体颜色为 #000 黑色,
                上面color:rgba(0,0,0, 0); 操作已将内容颜色设置为透明,
                所有下面内容的颜色必须设置，否则看不到字体内容
            -->
            .tip-bubble div{
                color:#000;
            }

        </style>
        <!----样式结束---->

    </head>

    <body>

        <br/>

        <!---对话框开始--->
        <div class="tip-bubble" >
            <div >
                    这一个对话框
            </div>
        </div>
        <!---对话框结束--->


    </body>

</html>

这里写图片描述

上面是演示效果图↑