• 纯css实现带三角箭头带描边带阴影带圆角的兼容各浏览器de气泡层

    上次看了乔花的文章<<CSS Border使用小分享>>，刚好手上有个需求，是做一个弹出气泡层，要求是

    1.带三角指示箭头

    2.边框需要描边

    3.渐进圆角

    有了那篇文章的启发之后，我们这里做起来就简单了

    说做就做，咱先整个描了边的浮动层，效果如下

    image

    接着给浮动层，加上三角的箭头指示，在div容器里面加入一个空的s标签，表示三角

       1: <html>
       2:     <head>
       3:         <style>
       4:         div{
       5:             position:absolute;
       6:             top:30px;
       7:             left:40px;
       8:             display:block;
       9:             height:100px;
      10:             200px;
      11:             border:1px solid #666;
      12:         }
      13:         s{
      14:             position:absolute;
      15:             top:-21px;
      16:             left:20px;
      17:             display:block;
      18:             height:0;
      19:             0;
      20:             font-size: 0;
      21:             line-height: 0;
      22:             border-color:transparent transparent #666 transparent;
      23:             border-style:dashed dashed solid dashed;
      24:             border-10px;
      25:         }
      26:         </style>
      27:     </head>
      28:     <body>
      29:         <div>
      30:             <s></s>
      31:         </div>
      32:     </body>
      33: </html>

    效果，

    image

    现在，我们需要一个白色背景的小三角将原来的深色三角遮住，用深色三角做底，为了颜色更明显一些，我这里用#ff0做底色，在s标签内嵌套一个空的i标签，并设置它的边框宽度略小一点

       1: <html>
       2:     <head>
       3:         <style>
       4:         div{
       5:             position:absolute;
       6:             top:30px;
       7:             left:40px;
       8:             display:block;
       9:             height:100px;
      10:             200px;
      11:             border:1px solid #666;
      12:             background-color:#ff0;
      13:         }
      14:         s{
      15:             position:absolute;
      16:             top:-21px;
      17:             left:20px;
      18:             display:block;
      19:             height:0;
      20:             0;
      21:             font-size: 0;
      22:             line-height: 0;
      23:             border-color:transparent transparent #666 transparent;
      24:             border-style:dashed dashed solid dashed;
      25:             border-10px;
      26:         }
      27:         i{
      28:             position:absolute;
      29:             top:-9px;
      30:             left:-10px;
      31:             display:block;
      32:             height:0;
      33:             0;
      34:             font-size: 0;
      35:             line-height: 0;
      36:             border-color:transparent transparent #ff0 transparent;
      37:             border-style:dashed dashed solid dashed;
      38:             border-10px;
      39:         }
      40:         </style>
      41:     </head>
      42:     <body>
      43:         <div>
      44:             <s>
      45:                 <i></i>
      46:             </s>
      47:         </div>
      48:     </body>
      49: </html>

    效果，

    image

    还不错吧，不过在IE下，有点小瑕疵，三角的定位有点的问题，简单hack一下，并把背景颜色改回白色

       1: <html>
       2:     <head>
       3:         <style>
       4:         div{
       5:             position:absolute;
       6:             top:30px;
       7:             left:40px;
       8:             display:block;
       9:             height:100px;
      10:             200px;
      11:             border:1px solid #666;
      12:             background-color:#fff;
      13:         }
      14:         s{
      15:             position:absolute;
      16:             top:-21px;
      17:             *top:-20px;
      18:             left:20px;
      19:             display:block;
      20:             height:0;
      21:             0;
      22:             font-size: 0;
      23:             line-height: 0;
      24:             border-color:transparent transparent #666 transparent;
      25:             border-style:dashed dashed solid dashed;
      26:             border-10px;
      27:         }
      28:         i{
      29:             position:absolute;
      30:             top:-9px;
      31:             *top:-9px;
      32:             left:-10px;
      33:             display:block;
      34:             height:0;
      35:             0;
      36:             font-size: 0;
      37:             line-height: 0;
      38:             border-color:transparent transparent #fff transparent;
      39:             border-style:dashed dashed solid dashed;
      40:             border-10px;
      41:         }
      42:         </style>
      43:     </head>
      44:     <body>
      45:         <div>
      46:             <s>
      47:                 <i></i>
      48:             </s>
      49:         </div>
      50:     </body>
      51: </html>

    这样在IE下效果也ok了

    image

    接着，我们需要给气泡层加上阴影效果。

    对于IE浏览器，我们需要使用滤镜Shadow，具体资料参考MSDN，http://msdn.microsoft.com/en-us/library/ms533086%28VS.85%29.aspx

    对于支持CSS3的标准浏览器，我们可以用boxshadow属性，而对于firefox或webkit核心的浏览器，需要使用各自的私有实现，合起来写就是

       1: div{
       2:     box-shadow: 3px 3px 4px #999;
       3:     -moz-box-shadow: 3px 3px 4px #999;
       4:     -webkit-box-shadow: 3px 3px 4px #999;
       5:     /* For IE 5.5 - 7 */
       6:     filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999');
       7:     /* For IE 8 */
       8:     -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')";
       9: }

    在firefox效果是ok的，但是ie又bug了

    imageimage

    IE里面的三角箭头没了。。。

    初步检查的结果是，怀疑由于css边框三角是没有盒子高度宽度的，所以阴影效果出不来，还把原来的三角给盖掉了。。。

    没办法，只好想个招，在div容器里面再做一个100% 大小的div，做气泡层的内容层

       1: <html>
       2:     <head>
       3:         <style>
       4:         div.container{
       5:             position:absolute;
       6:             top:30px;
       7:             left:40px;
       8:             display:block;
       9:             height:100px;
      10:             200px;
      11:             border:1px solid #666;
      12:             background-color:#fff;
      13:         }
      14:         s{
      15:             position:absolute;
      16:             top:-21px;
      17:             *top:-20px;
      18:             left:20px;
      19:             display:block;
      20:             height:0;
      21:             0;
      22:             font-size: 0;
      23:             line-height: 0;
      24:             border-color:transparent transparent #666 transparent;
      25:             border-style:dashed dashed solid dashed;
      26:             border-10px;
      27:         }
      28:         i{
      29:             position:absolute;
      30:             top:-9px;
      31:             *top:-9px;
      32:             left:-10px;
      33:             display:block;
      34:             height:0;
      35:             0;
      36:             font-size: 0;
      37:             line-height: 0;
      38:             border-color:transparent transparent #fff transparent;
      39:             border-style:dashed dashed solid dashed;
      40:             border-10px;
      41:         }
      42:         .content{
      43:             100%;
      44:             height:100%;
      45:             box-shadow: 3px 3px 4px #999;
      46:             -moz-box-shadow: 3px 3px 4px #999;
      47:             -webkit-box-shadow: 3px 3px 4px #999;
      48:             /* For IE 5.5 - 7 */
      49:             filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999');
      50:             /* For IE 8 */
      51:             -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')";
      52:         }
      53:         </style>
      54:     </head>
      55:     <body>
      56:         <div class="container">
      57:             <div class="content"></div>
      58:             <s>
      59:                 <i></i>
      60:             </s>
      61:         </div>
      62:     </body>
      63: </html>

    结果，firefox继续ok，IE继续悲剧…

    imageimage

    仔细捣鼓一番之后，怀疑是外部容器把阴影效果给遮住了，那么把div单独拿出来，绝对定位看看效果呢

    于是给content属性，加了position:absolute，兴冲冲的跑去ie一看，还是不行。。。

    怪事了！！！

    于是各种捣鼓和资料，发现了这么一个有趣的现象。在IE下的shadow属性，如果不设置盒模型的背景颜色的话，那么shadow默认是文字阴影，见效果

    image

    只有设置盒模型的背景颜色之后，盒子的阴影才生效。

    image

    这样，一个带描边的带三角的气泡层就新鲜出炉了。我们还可以给div加上css3的圆角，同时修改将气泡层的边框从container放置content中，设置打底的container为透明，效果如下

    image

    这样，唯一美中不足的就是我们的IE不支持圆角，别急，我们还是可以实现近似圆角在IE下

    IE下，我们可以用两个div叠加，做底的div提供一个四边框，里面的div绝对定位，上下边框比做的div分别高出1px，利用一个1px的视觉差，是用户看上去是一个圆角

    image

    这样最终的兼容代码为

       1: <html>
       2:     <head>
       3:         <style>
       4:         div.container{
       5:             position:absolute;
       6:             top:30px;
       7:             left:40px;
       8:             display:block;
       9:             height:100px;
      10:             200px;
      11:             background-color:transparent;
      12:             *border:1px solid #666;
      13:         }
      14:         s{
      15:             position:absolute;
      16:             top:-20px;
      17:             *top:-22px;
      18:             left:20px;
      19:             display:block;
      20:             height:0;
      21:             0;
      22:             font-size: 0;
      23:             line-height: 0;
      24:             border-color:transparent transparent #666 transparent;
      25:             border-style:dashed dashed solid dashed;
      26:             border-10px;
      27:         }
      28:         i{
      29:             position:absolute;
      30:             top:-9px;
      31:             *top:-9px;
      32:             left:-10px;
      33:             display:block;
      34:             height:0;
      35:             0;
      36:             font-size: 0;
      37:             line-height: 0;
      38:             border-color:transparent transparent #fff transparent;
      39:             border-style:dashed dashed solid dashed;
      40:             border-10px;
      41:         }
      42:         .content{
      43:             border:1px solid #666;
      44:             -moz-border-radius:3px;
      45:             -webkit-border-radius:3px;
      46:             position:absolute;
      47:             background-color:#fff;
      48:             100%;
      49:             height:100%;
      50:             *top:-2px;
      51:             *border-top:1px solid #666;
      52:             *border-top:1px solid #666;
      53:             *border-left:none;
      54:             *border-right:none;
      55:             *height:102px;
      56:             box-shadow: 3px 3px 4px #999;
      57:             -moz-box-shadow: 3px 3px 4px #999;
      58:             -webkit-box-shadow: 3px 3px 4px #999;
      59:             /* For IE 5.5 - 7 */
      60:             filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999');
      61:             /* For IE 8 */
      62:             -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')";
      63:         }
      64:         </style>
      65:     </head>
      66:     <body>
      67:         <div class="container">
      68:             <div class="content">a</div>
      69:             <s>
      70:                 <i></i>
      71:             </s>
      72:         </div>
      73:     </body>
      74: </html>
  • 相关阅读:
    利用消息机制实现.NET AOP(面向方面编程)－－通过RealProxy实现 zz
    A Taste of AOP from Solving Problems with OOP and Design Patterns (Part II) zz
    在.Net中使用异步（一）
    在.Net中使用异步（二）
    技术人员的误区(zz)
    A Taste of AOP from Solving Problems with OOP and Design Patterns (Part III) zz
    利用矩阵进行坐标系转换
    如何选择开源许可证[zz]
    .Net，你为什么会慢
    理解 Thread.Sleep 函数
  • 原文地址：https://www.cnblogs.com/xueduanyang/p/1872261.html
Copyright © 2020-2023  润新知