zoukankan      html  css  js  c++  java
  • 浮出层的css写法,完美兼容IE6~10

    利用元素间的绝对定位差一像素,使用不同颜色做出浮出层小三角的效果,完美兼容各浏览器!

    html部分:

    <div class="poptip">
    <span class="poptip-arrow poptip-arrow-top"><em></em><i></i></span>
    <span class="poptip-arrow poptip-arrow-right"><em></em><i></i></span>
    <span class="poptip-arrow poptip-arrow-bottom"><em></em><i></i></span>
    <span class="poptip-arrow poptip-arrow-left"><em></em><i></i></span> Hi,知道吗?
    <br>我是打酱油的!
    </div>

    css部分:

    /* poptip */
    .poptip{position: absolute;top: 20px;left:20px;padding: 6px 10px 5px;*padding: 7px 10px 4px;line-height: 16px;color: #DB7C22;font-size: 12px;background-color: #FFFCEF;border: solid 1px #FFBB76;border-radius: 2px;box-shadow: 0 0 3px #ddd;}
    .poptip-arrow{position: absolute;overflow: hidden;font-style: normal;font-family: simsun;font-size: 12px;text-shadow:0 0 2px #ccc;}
    
    .poptip-arrow em,.poptip-arrow i{position: absolute;left:0;top:0;font-style: normal;}
    .poptip-arrow em{color: #FFBB76;}
    .poptip-arrow i{color: #FFFCEF;text-shadow:none;}
    
    .poptip-arrow-top,.poptip-arrow-bottom{height: 6px;width: 12px;left:12px;margin-left:-6px;}
    .poptip-arrow-left,.poptip-arrow-right{height: 12px;width: 6px;top: 12px;margin-top:-6px;}
    
    .poptip-arrow-top{top: -6px;}
    .poptip-arrow-top em{top: -1px;}
    .poptip-arrow-top i{top: 0px;}
    
    .poptip-arrow-bottom{bottom: -6px;}
    .poptip-arrow-bottom em{top: -8px;}
    .poptip-arrow-bottom i{top: -9px;}
    
    .poptip-arrow-left{left:-6px;}
    .poptip-arrow-left em{left:1px;}
    .poptip-arrow-left i{left:2px;}
    
    .poptip-arrow-right{right:-6px;}
    .poptip-arrow-right em{left:-6px;}
    .poptip-arrow-right i{left:-7px;}

    ps:如果小三角需要居中,可以left或者top 50%

  • 相关阅读:
    请求返回结果模板
    Oracle的sql语句中case关键字的用法 & 单双引号的使用
    java如何从方法返回多个值
    junit的简单用法
    java命令启动jar包
    Fastjson-fastjson中$ref对象重复引用问题
    指定cmd窗口或tomcat运行窗口的名称
    Spring boot配置log4j输出日志
    The import XXX cannot be resolved
    斐波那契数列
  • 原文地址:https://www.cnblogs.com/zhyc010/p/4595393.html
Copyright © 2011-2022 走看看