zoukankan      html  css  js  c++  java
  • CSS制作气泡对话框

    参考阮一峰的网络日志,原文链接http://www.ruanyifeng.com/blog/2010/04/css_speech_bubbles.html
    HTML代码
    <div class="bubble">Who are you?</div>
    

    CSS代码设置  

    第一步,生成基本的方框。

    .bubble{
                position:relative;
                padding:15px;
                margin:1em 0em 3em;
                300px;
                line-height: 1.2;
                text-align: center;
                color:#fff;
                background:#FFB6C1;
    }
    

    第二步,生成圆角。

    .bubble{
               
                border-radius: 10px;//圆角
                -moz-border-radius:10px;
             -webkit-border-radius:10px;
            }
    

    第三步,在容器后面添加一个空元素,并将长度和宽度都设为0。

    .bubble:after{
                content: "0a0";//content 属性与 :before 及 :after 伪元素配合使用,来插入生
                               成内容。设置文本或图像出现(浮动)在另一个元素中的什么地方
    
                0;
                height: 0;
            }
    

     第四步,指定这个空元素为块级元素,并且四个边框之中,只显示上方的边框,其他三个边框,都设为透明。因为该元素的大小为0,所以它的每一个边框,都是一个等腰三角形。

    .bubble:after{
                display:block;
                border-style:solid;
                border-15px;
                border-color:#fff transparent transparent transparent;
              
            }
    

     第五步,指定空元素的定位方式为absolute。然后,以容器元素的左下角为基点,将空元素水平右移一定的距离(这里是50像素),再垂直下移两个边界的距离。(由于第五步将空元素的边界设为15像素,所以这里就是下移30像素。)

    .bubble:after{
                position: absolute;
                z-index: -1;
                bottom:-30px;
                left:150px;
            }
    

      

  • 相关阅读:
    find 命令
    shell 脚本 测试webApp
    thinkphp模板继承
    Tp-validate进阶thinkphp
    B2B、B2C、C2C、O2O
    phpstorm自定义代码片段
    phpstorm开启xdebug断点调试,断点调试不成功来这里
    app接口设计
    socket
    字符集转换
  • 原文地址:https://www.cnblogs.com/xy-milu/p/6626972.html
Copyright © 2011-2022 走看看