[转]纯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:             width: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:             width: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-width: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:             width: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:             width: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-width:10px;
  26:         }
  27:         i{
  28:             position:absolute;
  29:             top:-9px;
  30:             left:-10px;
  31:             display:block;
  32:             height:0;
  33:             width: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-width: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:             width: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:             width: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-width:10px;
  27:         }
  28:         i{
  29:             position:absolute;
  30:             top:-9px;
  31:             *top:-9px;
  32:             left:-10px;
  33:             display:block;
  34:             height:0;
  35:             width: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-width: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:             width: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:             width: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-width:10px;
  27:         }
  28:         i{
  29:             position:absolute;
  30:             top:-9px;
  31:             *top:-9px;
  32:             left:-10px;
  33:             display:block;
  34:             height:0;
  35:             width: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-width:10px;
  41:         }
  42:         .content{
  43:             width: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:             width: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:             width: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-width:10px;
  27:         }
  28:         i{
  29:             position:absolute;
  30:             top:-9px;
  31:             *top:-9px;
  32:             left:-10px;
  33:             display:block;
  34:             height:0;
  35:             width: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-width: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:             width: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>

 

posted @ 2010-11-09 15:21  o岸上的鱼o  阅读(448)  评论(0)    收藏  举报