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

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

1.带三角指示箭头

2.边框需要描边

3.渐进圆角

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

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

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

   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:         }